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/

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.

Cheers

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!

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

Cheers,
X

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.

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.

X support = wizards of code. 🙂

Let us know if you have any further questions.