Unable to get prevent function working for accordion

I have an app where I am trying to use the accordionBeforeOpen event to stop firing on a swipe.

  1. I created a fiddle to try and illustrate how I can not get the prevent function to stop the accordion opening?

  2. this led to a second problem that the following code is not getting hit in the jsfiddle example, as it does in my local app

app.on(‘accordionBeforeOpen’, function (el, prevent) {
console.log(‘The following element opened:’);
prevent; // does not seem to be working ??

  1. also curious if there any way to get the event in the above function so that I could track the last drag time and compare with the time of the current event, and such

you are using f7 v3.5.1

or at least thats the v in your fiddle

https://unpkg.com/[email protected]/js/framework7.js

i dont know since when accordionBeforeOpen its supported. but v3 its pretty old. Try updating to v5


just read the changelog

its available for v 3.6.0, so try by updating f7 to that version.

v3.6.0 - December 7, 2018

  • Core
    • Accordion
      • New accordion:beforeopen event that is triggered right before accordion will be opened. event.detail.prevent contains function that will prevent it from opening if called;
      • New accordion:beforeclose event that is triggered right before accordion will be closed. event.detail.prevent contains function that will prevent it from closing if called;

Thanks so much for your answer. I am using a later copy on my app but copied edited this from another example. I have now changed so it is using latest version here :


I have added swipeout for the accordion in my example, to show where I am trying to get to. Swiping left has no effect (normal accordion which is great) but swiping right causes it to open, probably because of the swipeout right.

I don’t see the prevent working even if I take out the swipeout classes.

I am hoping to prevent the accordion behaviour in both cases.

you reciving passing prevent as a param on the swiper, it is a function.

// this will prevent accordion if swipeout is opened
if ($('.swipeout-actions-opened').length) prevent()

note he the parenthesis ()

change the code to your needs

Thankyou so much for the effort. This is almost perfect. The only thing missing is the left swipe when the swipeout is open. I tried “swipeout-actions-deleted” and “swipeout-close” after searching code for similar classes.

Alternative I was thinking of over the weekend was something like the following… but looks messy.

var swipeOrClick = “click”;
app.on(‘swipeout’, function (el) {
console.log(“mouse Dragged”);
swipeOrClick = “swipeout”;
Dom7(’.swipeout’).on(‘mousemove’, function (e) {
console.log(‘swipeout mousemove’);
swipeOrClick = “move”;

Dont understand what you need with
The only thing missing is the left swipe when the swipeout is open

If I swipe right, the swipe buttons show and that is great.
Once they are shown, there is an option to swipe left , to remove the swipe options and return where you were. If I do that, the list opens as the buttons disappear.

Saved, with your addition:

this is what you need?

if ($$('.swipeout-actions-opened').length || $$('.swipeout-transitioning').length) prevent();
1 Like

thankyou so much

small hiccup
If you don’t swipe enough, the swipe transition seems to start but the buttons are not displayed.
At that point, I can no longer click because the transition is set.

Is there a way to check the visibility of the button?
Something like : Dom7(’.swipeout-actions-left’).is(’:visible’) ?