Adding an Accordion (Source Code)

Adding an Accordion (Source Code) Image

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.

Accordions are powerful, but they're not entirely easy to use. They involve a complex HTML structure which must be done correctly. Also, there is one important and tricky detail you must remember when dealing with accordions: all sections in the accordion must have unique identifiers and those identifiers must match on the button and the div that make up the section.

To make an accordion, first click Tools on the WYSIWYG for the relevant text area, then select "Source Code" and paste this code.

<div class="Accordion" data-allow-toggle="1">
   <button aria-expanded="false" class="Accordion-trigger" aria-controls="sect1">
      <h2 class="Accordion-title">Header</h2>
   </button>
   <div id="sect1" role="region" class="Accordion-panel" hidden="">
      <p>Some content</p>
   </div>
</div>

The items in bold must be unique for each accordion group, and the button's value for "aria-controls" must match the div's value for "id". You can do this in whatever way makes the most sense to you, provided these values are words and numbers with no spaces. Dashes are also possible. but to keep it simple, we suggest you use numbers. For example: sect1, sect2. So, a two-item accordion might look like this:

<div class="Accordion" data-allow-toggle="1">
   <button aria-expanded="false" class="Accordion-trigger" aria-controls="sect1">
      <h2 class="Accordion-title">Header</h2>
   </button>
   <div id="sect1" role="region" class="Accordion-panel" hidden="">
      <p>Some content</p>
   </div>
   <button aria-expanded="false" class="Accordion-trigger" aria-controls="sect2" id="accordion2id">
      <h2 class="Accordion-title">Header</h2>
   </button>
   <div id="sect2" role="region" class="Accordion-panel" hidden="">
      <p>Some content</p>
   </div>
</div>

And so forth.

What does it look like? Like this:

Adding Panels to an Accordion

To add panels to an accordion:

  • Copy the button and panel code for the last accordion section

       <button aria-expanded="false" class="Accordion-trigger" aria-controls="sect2" id="accordion2id">
          <h2 class="Accordion-title">Header</h2>
       </button>
       <div id="sect2" role="region" class="Accordion-panel" hidden="">
          <p>Some content</p>
       </div>

  • Paste that code directly under the code you copied and update the ids

       <button aria-expanded="false" class="Accordion-trigger" aria-controls="sect2" id="accordion2id">
          <h2 class="Accordion-title">Header</h2>
       </button>
       <div id="sect2" role="region" class="Accordion-panel" hidden="">
          <p>Some content</p>
       </div>

       <button aria-expanded="false" class="Accordion-trigger" aria-controls="sect3" id="accordion3id">
          <h2 class="Accordion-title">Header</h2>
       </button>
       <div id="sect3" role="region" class="Accordion-panel" hidden="">
          <p>Some content</p>
       </div>