Collapsible sections X Pro

Hi, I’ve put together a home page for a client using the collapsing section JS code referred to here:

and here:

I’m repeating the code below for each section, which works perfectly on desktop (obviously using the class .section-expandable for the collapsing sections and unique ids for each of the trigger buttons). However, on a mobile device the sections expand and then immediately close again, any idea what’s happening here and how to prevent/fix it?

jQuery(document).ready(function($){
$(’#foxer’).slideToggle(0);
$(’#foxer-trigger-button’).on(‘touchend click’, function(){
$(".section-expandable").not("#foxer").slideUp();
$(’#foxer’).slideToggle( “slow” );
});
});

Thanks in advance.

Hi There,

Please update your custom JS to this:

jQuery(document).ready(function($){
  $('#foxer-trigger-button').on('touchend click', function(event){
    event.preventDefault();
    $(".section-expandable").not("#foxer").slideUp();
    $('#foxer').slideToggle( "slow" );
  });
});

I’ve tested and it’s working fine on my local installation.

Could you please check again?

Regards!

Okay, you’ve won the internet today. Fast response and perfect fix. I just need to work out how to force the page to scroll to the section #id now - but, this fixes the issue I was having so have a big ‘well done’ on me!

On behalf of Thai, you’re most welcome! :wink:

I spoke a little too soon! Everything is now OPEN by default, whereas with the original JS everything was closed and then you click the button to open just that section. Clicking any other section closes the previous section and opens the new one.

With this update everything is open and when you click a button everything shuts. Can this be fixed? Please?

Hi Westy,

First of all, I apologize that we did not communicate with you correctly in the first place. Please consider that this is a customization request and outside of our support scope. We will do our best to help you out but we will not be able to implement the feature.

The reason that the mobile opens and closes immediately should be in the original code and we should not add additional code for that.

But in general, I suggest that you avoid having the feature in mobile as there are many factors that matter when it comes to touch devices which it is nearly impossible to be able to have a correct code.

That is why I suggest that you keep the code only for the desktop and use the hide during breakpoint options to hide all those sections on small screens and instead add a section which will show only on small screens and use the Accordion element or any element you see it fit to add separate data for them.

Thank you for you understanding.

Or just change the code to this:

jQuery(document).ready(function($){
$(’#foxer’).slideToggle(0);
$(’#foxer-trigger-button’).on(‘touchend click’, function(event){
event.preventDefault();
$(".section-expandable").not("#foxer").slideUp();
$(’#foxer’).slideToggle( “slow” );
});
});

X Theme accordion is extremely limited in what it can do, that’s why accordion sections area preferred option for some folks. It’s a shame Themeco don’t wish to implement this feature, it’s really handy. But for anyone who does, just adjust the code above and follow the advice in the previous threads about giving sections and trigger buttons a unique #id.

Oh, and thanks again for the original help.

Hi Westy,

I do understand your point and the limitation of the Accordion element. I suggested that as an alternative and my point is that you can use any element that you want in the mobile view by the method I mentioned.

We will surely add this as a feature request to have the section the ability of the collapse. Our development team will check and analyze if it is a feasible thing to implement depending on the count requests.

Thank you for your understanding.

:sunglasses:

Thanks for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.