title: Show More / Show Less Toggle on a Section within Elemenor
body: <p>I am trying to achieve a <strong>show more/show less</strong> function on my product page, built with Elementor Page Builder. Kinda Like <a href="https://codepen.io/ojbravo/pen/YPJpXe" rel="nofollow noreferrer">this</a> with the fade also, but using JS.</p>
  
  <p>I currently have this setup on my <a href="https://www.simplylifting.co.uk/lifting-web-sling-3-tonne/" rel="nofollow noreferrer">My Product Page</a>. It's not quite what I want as the section is completely hidden and then is revealed on-click.</p>
  
  <p>I have achieved this by doing the following:</p>
  
  <ul>
  <li>1no. Section with 1 Column.</li>
  <li>Within this, 2no. 'inner section widgets'.</li>
  <li>Top 'inner section' houses a product description widget. The 'inner
  section' of this has been given a CSS ID of 'hiddenBlock'</li>
  </ul>
  
  <p>I have then added the following custom CSS to this:</p>
  
  <pre><code>    #hiddenBlock {
  Display:none;
  }
  </code></pre>
  
  <ul>
  <li>The bottom 'inner section' widget houses the 'button widget'. The
  budget widget has been given the CSS ID of 'showBlock'</li>
  </ul>
  
  <p>Then I've added some custom JS using another plugin as follows:</p>
  
  <pre><code>jQuery(document).ready(function( $ ){
  
     $('#showBlock').click(function(e) {
        e.preventDefault();
     $('#hiddenBlock').fadeToggle("slow");
   });
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks in advance.</p>