Collapsing Sections: Override buttons, buttons go to top of page

[tlschlitz]

Hello,

I am creating collapsable sections on my website & need a little help with the fine-tuning. I have 3 sections on my page opening from a button click.

I have one part I am stuck on & wondering -

How to override the previous button click essentially.
– I have 3 buttons opening to 3 sections for different plan options. Currently, if you click one button after another they all open below, I would like it to override the previous button click to only open one option at a time. I.e. if you open the view options button under “value plans” then “basic plans” I would like the value plans section to disappear again without pressing the first button again.

Where I am having trouble:

Social Media Management

I have followed this forum for code: https://theme.co/apex/forums/topic/collapsible-complete-section-accordion-style-javascript-jquery-trouble/

My custom JS for the three buttons

jQuery(document).ready(function($){
$(’#basicservices’).slideToggle(0);
$(’#basicservices-trigger-button’).click(function(){
$(’#basicservices’).slideToggle( “slow” );
});
});
jQuery(document).ready(function($){
$(’#valueservices’).slideToggle(0);
$(’#valueservices-trigger-button’).click(function(){
$(’#valueservices’).slideToggle( “slow” );
});
});
jQuery(document).ready(function($){
$(’#premiumservices’).slideToggle(0);
$(’#premiumservices-trigger-button’).click(function(){
$(’#premiumservices’).slideToggle( “slow” );
});
});

Sections are customized by
Id: ***services
class: **services-trigger-button

Buttons customized
***services-trigger-button

Thanks for the help!

[nabeel]

Hi @tlschlitz,

Thank you for reaching out to us. You can fix it by replacing your entire code with the following:

jQuery(document).ready(function($){
	$('#basicservices, #valueservices, #premiumservices').slideUp(0);
	$('#basicservices-trigger-button').click(function(){
		$('#valueservices, #premiumservices').slideUp(0);
		$('#basicservices').slideToggle( "slow" );
	});
	$('#valueservices-trigger-button').click(function(){
		$('#basicservices, #premiumservices').slideUp(0);
		$('#valueservices').slideToggle( "slow" );
	});
	$('#premiumservices-trigger-button').click(function(){
		$('#basicservices, #valueservices').slideUp(0);
		$('#premiumservices').slideToggle( "slow" );
	});
});

Please note that the code provided above serves as a guide only and is to help you in getting started so 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 to break, you will need to hire a developer.

Don’t forget to clear all caches including your browser’s cache after adding the code. Hope this helps!

[tlschlitz]

That works perfect thanks!!

[ruenel]

You’re most welcome!
We really appreciate for letting us know that it has worked for you.