Docs

[JCastelize]

Is there a way to place a button inside the accordion that closes it when you’re done reading? I have a lot of text in my accordions so by the time you’re done reading it, you have to scroll a ways up to close it again.

All X-theme shortcodes and wordpress are up to date. Here’s the page to which the question relates: http://www.wpgelsite.info/TriCore/testimonials/

[Zeshan]

Hi Jacqueline!

Thank you for writing in!

To achieve this, add the following jQuery code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
   var close = $('.accordion-close'),
       accBody = close.closest('.accordion-body'),
       accHead = accBody.siblings('.x-accordion-heading').find('.x-accordion-toggle');
   
   close.click(function(e) {
      e.preventDefault();
      accBody.removeClass('in').animate({'height': '0px'}, 300);
      accHead.addClass('collapsed');
   });

});

And add a link with class accordion-close at the end of you accordion body, like:

<a href="#" class="accordion-close">Close</a>

Hope this helps. 🙂

Thank you.

[JCastelize]

Thanks! That did the trick.

[Kosher K]

Good to hear that.

Cheers

[Misho]

Hi!

I have just used this trick, works great!

I have added one more functionality:

If you close the long accordion with a button or link like this, you will end up at the place where the accordion ended, and you may have some content above which you have missed, so you need to scroll up. The user may not even realize that he has just missed some content and continue to read from the place he ended up.

To solve this, simply add an ID to the accordion, like my-accordion.

Then modify the above link into: <a class="accordion-close" href="#my-accordion">Close</a>

This will make the page scroll back to where you have started, so you can continue down the page after finishing with the accordion.

I hope this will be helpful. 🙂

Take care!

[Rue Nel]

Hello Misho,

Thanks for sharing what have you done in your site. For sure other X theme users will find this very handy.

Cheers,
X

[Misho]

No problem! 🙂

Unfortunately, i have found a downside on the second method: it will not work on touch screens. When pressed on a touch screen, it will not close the accordion, it will only make scroll to it.

When clicked with the mouse, both actions are executed, but when touched – only one works.

If there is no fix for this, the workaround is to make it visible for desktop only.

[Thai]

Hi @Misho,
Please try this following code instead of the previous code:

jQuery(document).ready(function($) {
	var close = $('.accordion-close'),
	accBody = close.closest('.accordion-body'),
	accHead = accBody.siblings('.x-accordion-heading').find('.x-accordion-toggle');

	close.on('click touchend',function(e) {
		e.preventDefault();
		accBody.removeClass('in').animate({'height': '0px'}, 300);
		accHead.addClass('collapsed');
	});
});

Hope it helps.

[Misho]

Works on all devices now!

X support = wizards of code. 🙂

[Paul R]

Thank you for your kind words. 🙂

Let us know if you have any further questions.

[Stjarne]

When i implent the javascript and the <a class= etc in my accordian i get the close button, but when i click it i get scrolled up to where the accordian starts but it does not close the accordian… ?

[Rupok]

Hi @stjarne

Thanks for updating. Would you please share your URL and point us where you are trying this? Also paste the code you have added.

Cheers!

[Stjarne]

This reply has been marked as private.

[Nabeel A]

Hi again,

Thanks you for providing the credentials, there was a syntax error in your jQuery script. I went ahead and fixed it for you. Now the close button works fine. Also I modified your code to close previous accordions when opening another.

Clear your browser’s cache and check the site again. Cheers!

[Stjarne]

Awsome!!!!

Cheers

[Author]

Posts