Dynamic toggle function to Show or Hide content

You have extra information you want to make available to your website visitors but you don't want to mess-up your design by to much content? A dynamic toggle to Show or Hide this extra information might be what you're looking for.

It's pretty simple.

Step 1 - Add the following script to your templates header injection point.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

<script type="text/javascript">
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';

Line 1 simply loads the minimized jQuery library from the Google library page. The rest is what the action does.

Step 2 - Add the additional HTML code with your extra text.

<h3 onclick="myFunction()">Click Me</h3>

<div id="myDIV">
  This is my DIV element.

Step 3 - Use CSS to make it look right.

#myDIV {
   padding: 20px;

And if you want to show your extra content by default just remove: "display:none;" from the CSS style entry!

That's it!

see it in action...

Click Me

This is my DIV element.