Docs

[Andrei]

Hi, I have accordeons in my FAQ page and also in my product page. When I collapse the accordeon it reacts almost instantly. But when I want to close the inner of the accordeon it lags. I want it to react instantly as the collapse does. My page is //sinestezic.com

[Nabeel A]

Hi there,

Thanks for writing in! To fix the issue, just add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.x-accordion-heading').click(function(){
		$('.accordion-body.collapse').hide();
		$(this).next().toggle();
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Andrei]

It works great, but if I have an accordion opened and I want to open another one without closing the first one, when I open it it lags the closing of the first accordion. I attached an image.

[Rupok]

Hi there,

Thanks for writing back. So you don’t want to close the previous accordion when open the next one, right? In that case you can use the Accordion shortcode as it has this control – http://demo.theme.co/integrity-1/shortcodes/accordion/

Let’s grab the shortcode example and make sure to remove parent_id="my-accordion" from code.

[accordion id="my-accordion"] [accordion_item title="Accordion Title"]Your text here[/accordion_item] [accordion_item title="Accordion Title" open="true"]Your second accordion text[/accordion_item] [accordion_item title="Accordion Title"]Your third accordion text[/accordion_item] [/accordion]

You can try this within a Text Element. If this is what you are trying to achieve then you can proceed.

Cheers!

[Andrei]

Hi Rupok,

Thank you very much for your reply. I want the previous accordion to close when I open the second one, but it has a lag when it closes. I would like it to close as fast as it opens.

[Nabeel A]

Hi again,

Please replace the previous code with this one:

jQuery(document).ready(function($){
	$('.x-accordion-heading').click(function(){
                $('.x-accordion-heading').next().toggle();
		$('.accordion-body.collapse').hide();
		$(this).next().toggle();
	});
});

Let us know how this goes!

[Andrei]

It works great! Thank you very much Nabeel!

[Nabeel A]

Glad we could help 🙂

Cheers!

[Author]

Posts