How to have Expandable/Collapsible Sections of Text


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"> <a 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"> <a 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"> <a 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>
How helpful was this article?
Number of questions: 0