Adding an Accordion (Source Code)

Adding an Accordion (Source Code)

Do you have a lot to say on one page? If you're willing to dive into the mysteries of HTML edit view, you can build a user interface element called an "accordion" to allow your users to view a list of headings and to click on each heading to view its contents. 

Click Tools, then select "Source Code" and paste this code.

<div class="accordion icon-y" style="width: 600px;">
   <h3><a href="#">First item</a></h3>
   <div class="content">
      <p>This is my content.</p>
   </div>
   <h3><a href="#">Second item</a></h3>
   <div class="content">
      <p>This is my content.</p>
   </div>
   <h3><a href="#">Third item</a></h3>
   <div class="content">
      <p>I got really fancy. Here's a picture of Spider-Meme.</p>
   </div>
</div>

That's it. The system does the rest of the work for you. The style portion of the first div is optional. It sets the width of your accordion so that it does not overlap your right-hand column.

What does it look like? Like this:

First item

This is my content.

Second item

This is more content.

Third item

The emperor took over this content.