How to have Expandable/Collapsible Sections of Text

Follow

This is not something built into the Spark Pay online store, however it can be accomplished very easily with some simple jQuery.

This is an example:

<div class="ac-expand">
  <div class="ac-expand-link">
    <href="#">Show</a>
  </div>
  <div class="ac-expand-content" style="display:none;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Etiam iaculis dignissim nulla et dictum.
Donec dignissim ligula leo, vitae commodo purus. 

    Vivamus elementum mi vel nibh dapibus vulputate. 
  </div>
</div>

<div class="ac-expand">
  <div class="ac-expand-link">
    <href="#">Show</a>
  </div>
  <div class="ac-expand-content" style="display:none;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Etiam iaculis dignissim nulla et dictum.
Donec dignissim ligula leo, vitae commodo purus. 

    Vivamus elementum mi vel nibh dapibus vulputate. 
  </div>
</div>

<!-- This one will be shown by default. Notice the Text of the link says "Hide" instead of "Show" -->
<div class="ac-expand">
  <div class="ac-expand-link">
    <href="#">Hide</a>
  </div>
  <div class="ac-expand-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Etiam iaculis dignissim nulla et dictum.
Donec dignissim ligula leo, vitae commodo purus. 

    Vivamus elementum mi vel nibh dapibus vulputate. 
  </div>
</div>

<script>
  //make sure this matches the default text you put in the link above
  var sShow "Show",
      sHide "Hide";
  
  $(function(){
    $(".ac-expand").each(function(){
      var $link $(this).find(".ac-expand-link a"),
          $content $(this).find(".ac-expand-content");
      
      $link.click(function(e){
        $content.fadeToggle();
        $link.text$link.text(== sShow sHide sShow );
        e.preventDefault();
      });
    });
  });
</script>
Have more questions? Submit a request

Comments

  • Avatar
    Tenisha Corrales

    Will this work to make Category or Attribute headings expandable to select filter inside?