Expanding content

You can hide page content and expand it by having the user click a link. The link can be basically anything from a text, h1-h4, an image or whatever.

Add the pagescript /styling/expanders.js to the headerscripts field, and do the following:

1. Add the class "expanderlink" to the activation element. Don't want an arrow? Use the class "expanderlink noarrow".

2. Wrap the content to be activated in a DIV with the class "expandercontent".

NB! Make sure the DIV wrapper is situated immediately next to the activation element.

 

Example code:

<a class="expanderlink">Click here to see more</a>

<div class="expandercontent">This content will be displayed on click</div>

This content will appear when clicking the link

Click here to expand

This content will appear when clicking the link

This content will appear when clicking the link

This content will appear when clicking the link