Collapsing expanded section when opening another

Support
#1

Hey there,

Looking for a code check. I have three buttons, each designated to expand a particular section. I would like for an opened section to collapse when I open another. Currently using the code below.

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


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


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

Hello Dan,

Thanks for writing in!

To accomplish what you have in mind, please add a custom section-expandable class in all of the three section. And then in each section, add a custom ID as well. You may add section-expandable1, section-expandable2 and section-expandable3 respectively.

You may then update your code into this:

jQuery(document).ready(function($){
  $('.section-expandable').slideToggle(0);

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

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

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

We would love to know if this has worked for you. Thank you.

#3

Thanks, but unless I’m doing something wrong, it doesn’t work. Each section is open upon loading the page, and then does not expand once collapsed.

#4

Creds below

#5

Hello Dan,

I have logged in and resolved your issue.

Here’s what I did:

  • I have added a custom section-expandable class in all of the three-section
  • I made sure that each section has a unique ID section-expandable1, -expandable2 and section-expandable3
  • And I have updated your JS code into this:
jQuery(document).ready(function($){
  $('.section-expandable').slideToggle(0);

    $('#one-trigger-button').on('touchend click', function(){
       $('.section-expandable').slideUp();
       $("#section-expandable1").slideToggle();
    });

    $('#two-trigger-button').on('touchend click', function(){
       $('.section-expandable').slideUp();
       $("#section-expandable2").slideToggle();
    });

    $('#three-trigger-button').on('touchend click', function(){
       $('.section-expandable').slideUp();
       $("#section-expandable3").slideToggle();
    });
});

Please check your site now.

#6

Thank you. Your code solves the issue I was having. However, the expanded section does not stay closed when you click on its button.

#7

Hello Dan,

I have updated the code into this:

jQuery(document).ready(function($){
  $('.section-expandable').slideToggle(0);

    $('#one-trigger-button').on('touchend click', function(){
       $('.section-expandable:not(#section-expandable1)').slideUp();
       $("#section-expandable1").slideToggle();
    });

    $('#two-trigger-button').on('touchend click', function(){
       $('.section-expandable:not(#section-expandable2)').slideUp();
       $("#section-expandable2").slideToggle();
    });

    $('#three-trigger-button').on('touchend click', function(){
       $('.section-expandable:not(#section-expandable3)').slideUp();
       $("#section-expandable3").slideToggle();
    });
});

so that the section will close or open up as soon as you click the button.

Check your site now.

#8

Works perfectly. Thank you so much!

#9

We are delighted to assist you with this.

Cheers!

#10

Hey. I just checked it on mobile and the sections do not stay expanded once clicked.

#11

Hey Dan,

I went ahead and replaced the previous code with the following:

jQuery(document).ready(function($){
  $('.section-expandable').slideToggle(0);

    $('#one-trigger-button').on('click', function(){
       $('.section-expandable:not(#section-expandable1)').slideUp();
       $("#section-expandable1").slideToggle();
    });

    $('#two-trigger-button').on('click', function(){
       $('.section-expandable:not(#section-expandable2)').slideUp();
       $("#section-expandable2").slideToggle();
    });

    $('#three-trigger-button').on('click', function(){
       $('.section-expandable:not(#section-expandable3)').slideUp();
       $("#section-expandable3").slideToggle();
    });
});

This seems to have fixed the issue, please clear your device browser’s cache and check the page again. Cheers!

#12

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