Collapse All Sections

Support
#1

Hi there,

I built a page with several collapsible sections using this tutorial:

But I would like any open sections to collapse when a new section is triggered. Any assistance you can provide is appreciated. Thank you!

#2

Hi There,

I would like to check that page but it has the protected password.

Could you please provide us with the password also?

Thanks.

#3

Apologies, I forgot it was password protected. I’ve updated the secure note with the details :slight_smile:

Again collapsible sections
#4

Hi again,

As you see this requires custom development and customization was provided by us is to help you get what you need, but implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization break you will need to hire a developer.

With that being said, I can point you in the right direction. First give all of your buttons a same class section-trigger instead of giving different ID’s then replace your old code with the following code:

jQuery(document).ready(function($){
    $('.section-trigger').on('click',function(e){
		e.preventDefault();
		$('.section-expandable .x-container:nth-child(2)').hide();
		var section_id = $(this).attr('id');
		$(section_id).slideToggle('slow');
		$('html, body').animate({
			scrollTop: $(".section-expandable").offset().top
		}, 700, 'swing');
	});
});

Please consider the following code a guide to get you started on collapsing sections.

Hope this helps!

#5

Thanks for your input but unfortunately when I made those changes, all the sections appeared upon load (want them hidden by default) and then vanished when clicked upon. When I clicked again, it only loaded the first row in all of the sections, not both rows of content. Also, apologies if my first note was unclear but I’d like only the new section which is clicked to appear upon click (e.g., hide other open sections, leave only the clicked section open).

#6

Hi there,

Unfortunately, I can’t test it with another code since that one is present. Would you mind providing your login credentials too? Or just remove the codes, it causes the test to fail at this moment.

Thanks!

#7

I’ve updated the secure note with login details :slight_smile:

#8

Hello There,

Thanks for providing the information. I have logged in and deactivated the Autoptimize and W3 Total Cache plugin.

I also modified the page and change your links into this:

<a class="section-trigger" href="#LeadershipTeam">Leadership Team</a> | <a class="section-trigger" href="#AMTeam"  >Asset Management</a> | <a class="section-trigger" href="#PCMTeam">Private Capital Markets</a> | <a class="section-trigger" href="#EAGTeam">East Asia Group</a> | <a class="section-trigger" href="#CISTeam">Corporate &amp; Investor Services</a> | <a href="#LegalTeam"  class="section-trigger">Legal &amp; Compliance</a>

And lastly, I have updated the JS code into this:

jQuery(document).ready(function($){
	$('.section-trigger').each(function(){
		$(this).on('click',function(e){
			e.preventDefault();
			$('.section-expandable').hide();
			var section_id = $(this).attr('href');
			$(section_id).parents('.section-expandable').slideToggle('slow');
			$('html, body').animate({
				scrollTop: $(section_id + ".section-expandable").offset().top
			}, 700, 'swing');
		});
	});
});

Please check your site now.

#9

Wonderful, thank you so much for your assistance with this!!

#10

Glad we could help.

Cheers!

#11

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