Building Your Site

Show and hide content blocks

You may want to shorten your pages (especially those with long lists) by hiding the content initially and allowing the user to choose to show it. To do this, add a class called "showhide" to any heading (h3 or h2, for example) and then surround the content you want to be hidden within a block tag such as <div> or <ul>.

Example

Add class="showhide" to a header, and create a block section


                                       
<h3 class="showhide">Header Sample</h3>
 <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Vestibulum in turpis nec nunc dignissim dignissim ut id libero.</li>
    <li> Duis eget augue eget felis scelerisque dictum pulvinar id tellus.</li>
</ul>

<h3> Header Sample

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vestibulum in turpis nec nunc dignissim dignissim ut id libero.
  • Duis eget augue eget felis scelerisque dictum pulvinar id tellus.

<h2> Header Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut arcu nulla. In congue pretium pellentesque. Praesent dapibus egestas lectus et hendrerit. Suspendisse aliquam purus ut diam volutpat dictum. In velit tellus, dictum id imperdiet sed, euismod posuere turpis. Sed dictum quam in mi mollis in dictum erat lacinia. In lorem diam, porttitor eu consectetur in, interdum rutrum augue. Cras in dui at mi lobortis porta. Sed nec ultrices sapien. Pellentesque molestie lorem at nulla euismod tincidunt. Curabitur commodo adipiscing sapien, in blandit neque vehicula eu. Aliquam sit amet metus metus. Ut a purus felis, sit amet ultrices odio.