Occordion text Closed: MORE - Opened: LESS

[cvdw]

I like to achief like this old topic:

Topic: Change the words "Read More" to "Read less" when the accordion is open...

But this is doing nothing in my page as log as I can see.

How can I display “See more” when the accordion is closed and “See less” when it’s opened?

I managed already to put a See less at the end of the text when open but now the accordion header it self.

My page: https://www.dekleinecantharel.nl/more-less/

THX

[christian]

Hey @cvdw,

The code is for the Classic Accordion. You most probably are using the V2 or just the Accordion Element so the code should look like the following:

(function($){
  $('.x-acc-header').on('click touchend', function(){
    if( ! $(this).hasClass('x-active') ) {
      $(this).text('Read More');
    } else {
      $(this).text('Read Less');
    }
  })
})(jQuery);

2020 12 24 16h49 34

One thing that we didn’t notify in the old thread is that providing custom code is outside the scope of our theme support. We provided it as an example only. We will not support issues that will arise from the use of any custom code nor will we provide further enhancements. For that, you need to hire a developer.

Hope that helps and thank you for understanding.

[cvdw]

@christian

(function($){
  $('.x-acc-header').on('click touchend', function(){
    if( ! $(this).hasClass('x-active') ) {
      $(this).text('Read More');
    } else {
      $(this).text('Read Less');
    }
  })
})(jQuery);

THX!

Is it also possible to place an icon before the text Show more, Show less?

I tried this but doesn’t work…

(function($){
$(’.x-acc-header’).on(‘click touchend’, function(){
if( ! $(this).hasClass(‘x-active’) ) {
$(this).text(’[x_icon type=“l-angle-double-up” class=“custom-icon”] Show less’);
} else {
$(this).text(’[x_icon type=“l-angle-double-up” class=“custom-icon”] Show more’);
}
})
})(jQuery);

[nabeel]

Hey @cvdw,

To show icons, you can replace your code with the following code:

(function($){
  $('.x-acc-header').on('click touchend', function(){
    if( ! $(this).hasClass('x-active') ) {
      $(this).html('<i style="font-family: \'FontAwesome\';" class="fas fa-angle-double-up"></i> Read More');
    } else {
      $(this).html('<i style="font-family: \'FontAwesome\';" class="fas fa-angle-double-down"></i> Read Less');
    }
  })
})(jQuery);

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.

Thank you for understanding!

[cvdw]

THX, the icons are there but they are bit transformed… A kind of cursive

[prakash_s]

Hello @cvdw,

You can change the FontAwesome icon class in the code as per your design from the FontAwesome icon list and style it through custom CSS. For that, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps
Thanks