Collapsible Sections | jQuery Placement

Support
#1

Please read the issue thoroughly. I’m not requesting additional support outside the scope of the support staff. I’m requesting support in making sure I have the right pieces plugged in and not overlooking something.

With that said, I’ve been trying to figure out why my section isn’t collapsing.

Here is the jQuery:

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

For the button ID:

one-trigger-button

For the section class:

section-expandable

Page and all necessary information posted in the secure note below.

#2

Hello There,

Thanks for the very detailed post information. Your section is not visible because you have enabled the visibility option and hid it for large and medium screens. And if you do this on purpose, it fine should have worked. The problem is that there is no section with the element ID of one and you have incorrect button ID so I guess, your code should only be:

jQuery(document).ready(function($){
    $('#one-trigger-button-anchor-button').on('touchend click', function(){
       $(".section-expandable").slideUp();
       console.log('Clicked!');
    });
});

And yes it is advisable that your insert the following custom js code in Cornerstone custom js section, Custom JS.

Hope this helps. Kindly let us know.

#3

Hey there!

Thank you so much.

Correct. The section is hidden on desktop and laptop breakpoints. This functionality is meant for mobile.

I input the jQuery you suggested and it worked. The problem is is that the section won’t expand once collapsed.

I’m looking at the code now. How can I make it so the section is collapsed first instead of expanded to start? Would I change

$(".section-expandable").slideUp();

to

$(".section-collapsible").slideDown();

Thank you so much for the help!

#4

Hi,

You may change it with .slideToggle

eg.

jQuery(document).ready(function($){
$('#one-trigger-button-anchor-button').on('touchend click', function(){
     $(".section-expandable").slideToggle("slow");
         console.log('Clicked!');
     });
});

Hope that helps

#5

This works on desktop when I shrink the browser to mobile width, but on a phone I can’t get it to work at all unfortunately.

Does it need a separate piece of code for mobile?

#6

Hi There,

I have checked on my mobile and it works the same like on desktop. Please try to clear browser cache and then check again.

#7

It definitely works on desktop. Just not mobile. I’m attaching a Dropbox link to a video recording.

#8

Hi there,

Despite the first input you had, I am sure you realize that this is going more and more to the realm of custom development. We tried our best to help you around to help you add a functionality which is not in our theme out of the box.

The only additional help we can think of is that you have only the touchend event and not the click event, so delete the click from ‘touchend click’ section of the code.

The effect seems to be a double triggering of the event. That is why I think having the touchend will do the trick as you intend to have this on mobile devices.

Thank you for your understanding.

#9

That did the trick.

Thank you so much!

#10

Couldn’t figure out how to make the sections collapsible on page load. Did a Google search and you all have solved this problem in the past. To anyone who wants to make sections collapsible and expandible like the Accordion element refer to this post here:

You can close this post.

Thank you!

#11

Thank you. Glad that you have managed to achieve your goal.

#12

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