Main Content

Using WC Navigation Tools

WC Accordion for Accordion Navigation

WC Accordion can be used to create a tabbed interface like the one below. Click on each section of the accordion to learn how...

Step 1: Add the accordion interface shell.

The accordion interface shell is simply a div with the following attributes:

  • a unique id and
  • the accordion-interface class
<div id="uniqueid" class="accordion-interface">
</div>

Step 2: For each section of the accordion, add a heading.

Each heading (eg. h3, h4, h5, and h6) in your content should have with the following attributes:

  • a unique id and
  • an optional heading title
<div id="uniqueid" class="accordion-interface">
<h4 id="uniqueid01" title="INSERT ACCORION SECTION TITLE" >
INSERT HEADING HERE
</h4>
</div>

Tip: If you would like WC Accordion to ignore a certain heading type when building an accordion from your headings, add that tag as a class to the accordion shell, as in <div id="uniqueid" class="accordion-interface h3">.

Step 3: Add content to your accordion section.

Place your tab content into the tab-section:

<div id="uniqueid" class="accordion-interface">
<h4 id="uniqueid01" title="INSERT ACCORION SECTION TITLE">
INSERT HEADING HERE
</h4>
...INSERT SECTION CONTENT HERE...
</div>

Top of page