-
AuthorPosts
-
September 2, 2014 at 1:03 pm #97047
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/
September 2, 2014 at 3:19 pm #97154Hi 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.
September 3, 2014 at 4:59 pm #97925Thanks! That did the trick.
September 3, 2014 at 5:04 pm #97932Good to hear that.
Cheers
March 27, 2015 at 4:31 pm #236698Hi!
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!
March 27, 2015 at 9:04 pm #236848Hello Misho,
Thanks for sharing what have you done in your site. For sure other X theme users will find this very handy.
Cheers,
XMarch 28, 2015 at 9:47 am #237089No 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.
March 28, 2015 at 10:54 am #237101Hi @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.
March 30, 2015 at 4:26 am #237914Works on all devices now!
X support = wizards of code. 🙂
March 30, 2015 at 4:29 am #237917Thank you for your kind words. 🙂
Let us know if you have any further questions.
December 30, 2015 at 9:11 am #725515When 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… ?
December 30, 2015 at 9:29 am #725527Hi @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!
December 30, 2015 at 10:28 am #725594This reply has been marked as private.December 30, 2015 at 2:03 pm #725804Hi 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!
December 30, 2015 at 2:27 pm #725845Awsome!!!!
Cheers
-
AuthorPosts