Show More / Show Less Toggle on a Section within Elemenor

Question

I am trying to achieve a show more/show less function on my product page, built with Elementor Page Builder. Kinda Like this with the fade also, but using JS.

I currently have this setup on my My Product Page . It's not quite what I want as the section is completely hidden and then is revealed on-click.

I have achieved this by doing the following:

• 1no. Section with 1 Column.
• Within this, 2no. 'inner section widgets'.
• Top 'inner section' houses a product description widget. The 'inner section' of this has been given a CSS ID of 'hiddenBlock'

I have then added the following custom CSS to this:

    #hiddenBlock {
Display:none;
}

• The bottom 'inner section' widget houses the 'button widget'. The budget widget has been given the CSS ID of 'showBlock'

Then I've added some custom JS using another plugin as follows:

jQuery(document).ready(function( $ ){

   $('#showBlock').click(function(e) {
      e.preventDefault();
   $('#hiddenBlock').fadeToggle("slow");
 });
});

However, how would I go about achieving what I mentioned where the section can be partially viewed and then completely revealed on-click. I'd ideally like the button text to change also when its clicked, to say 'show less' or something.

Thanks in advance.

Answer 1

Can you using .toggle()

jQuery(document).ready(function( $ ){
   $('#showBlock').click(function(e) {
       $('#hiddenBlock').toggle();
       e.preventDefault();
   });
});