How to create expandable/collapsible paragraphs?

Nathan asked a great question on how to create expandable/collapsible paragraphs in MOLSB. There are fancy ways of doing this, namely, to use a javascript library, but we will stick with the basics for now on this.

1. Follow the instructions on adding a Custom Footer module to your web page.
2. Replace the code in the Custom Footer module XSLT text box with the following:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

  <xsl:output method="html" />

  <xsl:template match="/Footer">

<style>

.ecPara {

  display:none;

}

</style>

<script>

function toggler(id) {

  if (document.getElementById(id).style.display == "none")

    document.getElementById(id).style.display = 'block';

  else

    document.getElementById(id).style.display = 'none';

}

</script>

<a href="javascript:toggler('para1');">Header Line</a>

<div style="display:none;" class="ecPara" id="para1">

<p>This is my paragraph. When the page initially loads, 

this is hidden. When the header link is clicked, then this paragraph 

appears! Click on the header link again, and this paragraph disappears.</p>

</div>

<script>

    document.getElementById('para1').parentNode.style.display = 'block';

</script>

  </xsl:template>

</xsl:stylesheet>

1. Note the text highlighted in orange. You will need to replace those with your own header and paragraph text.
2. If you need to create more units of this, just add a new Custom Footer module to your page and repeat the above steps. You will need to change the text highlighted in green to a new name for each new Custom Footer module you add in. (Optional: If you have multiple units of these Custom Footer modules, to optimize the code, you will only need to have one instance of the code in purple, i.e. you only need to include it in one Custom Footer module and can remove the code from all the other Custom Footer modules.)

Click here for a demo.