When to use accordions

Accordions are best used on pages where the content can be structured as main headings followed by secondary information that can be expanded on demand. The secondary information is automatically collapsed (i.e., hidden) when a reader first goes to a page; they can expand an accordion by clicking on the main heading. A reader can expand or collapse whatever accordion items they wish.

A collapsed accordion item is indicated by a "+" next to the header. An expanded item is indicated by a "—"

Example: On a page that describes a step-by-step procedure, the names of the steps are displayed as main headings, and the details describing each step are collapsed. In this screenshot, the reader has chosen to expand Step 1 but has left Steps 2-4 collapsed:

Note:

• Do not add accordions to blocks. They do not style properly.
• It is a best practice to avoid nesting tabs and accordions within one another. These templates hide page content, and multiple levels of hidden content can make pages difficult to navigate. 
• You can have several accordion rows, but your page should be user-friendly. Don't use accordions to clump a lot of content onto one page that should be separated into several pages.

---

Creating accordions

To create an accordion on a WMS page:

1. Place your cursor in the WYSIWYG editor window where you want to add the accordion.
   
   
2. Click the Templates icon.
   
   
3. The Content Templates pop-up window will open.
   
   1. Select Accordion. The WYSIWYG editor will insert a four-accordion layout into your page. The accordion will be populated with placeholder text that you will manually replace in Steps 4 and 5 below.
   2. (Optional) Select Replace actual contents ONLY if you want all the pre-existing content on the page to disappear. This option is useful if you accidentally selected the wrong template and are trying to replace it.
4. Double-click on Title A to replace it with your own text. Your title text will always be visible on the page; the user will click on it to expand Content A.
   
   
5. Replace Content A with your own text. This text will be visible only when the user expands the Title A heading.
   
   
6. Repeat Steps 4-5 for other accordion items.
7. If you want fewer than the default four accordions, delete the extras. If you want more than four accordions, see Adding additional accordion items.
8. Click the Save button once you have finished replacing all the placeholder text with your own text.

---

Source code view for an accordion

This is the source code that the WYSIWYG editor generates when you insert a four-accordion layout into your page:

<div class="accordion">
    <h3><a href="#">Title A</a></h3>

<div>
        <p>Content A</p>
    </div>   

<h3><a href="#">Title B</a></h3>

<div>
        <p>Content B</p>
    </div>

    <h3><a href="#">Title C</a></h3>

<div>
        <p>Content C</p>
    </div>    

<h3><a href="#">Title D</a></h3>

<div>
        <p>Content D</p>
    </div>
</div>

Each accordion item contains two elements:

• the header (surrounded by the <h3> </h3> tags)
• the content (surrounded by the <div> </div> tags)

This is the HTML code for one accordion item:

<h3><a href="#">Title A</a></h3>

    <div>
        <p>Content A</p>
    </div>

 

Note:

• The default heading tag is H3, but accordions will work with any heading tag from H2 to H6. However, linking directly to an accordion item will only work with H3.
• You can have any content between the <div></div> tags (e.g., tables, paragraphs, ordered lists, images) except heading tags.

---

Adding additional accordions

When you insert an accordion, the WYSIWYG editor creates four accordion items by default. These have the placeholder titles of A, B, C, and D.

To add additional accordions to your page:

1. In the WYSIWYG editor window, click on the Source button to view the HTML code.
2. Highlight the HTML code for one accordion item (as described in Source code view for accordions). It does not matter whether you highlight the HTML code for item A, B, C, or D.
3. Press CTRL-C to copy the code into your copy buffer.
4. Place your cursor between the code for any two accordion items. Press CTRL-V to paste a copy of the HTML code.
5. Repeat Step 4 for each additional accordion you want to create.
6. Click on the Source button to return to the WYSIWYG window.
7. Follow the steps in Creating accordions to replace the accordion placeholder text.

---

Using images within accordions

If you're adding an image to an accordion's content, make sure to keep it inside the <div> tags.

If you want your text to wrap around the image, you need to insert the image at the top of the text and choose either left- or right-alignment from the WYSIWYG editor. Also, make sure the text fully wraps around the image, or add as many line breaks (<br> tags) as you need to cover the height of the image. 

Example:

Code for the example accordion illustrated above:

<h3>Step 2 - Create Final Report</h3>
<div>
<p><img style="FLOAT: left" class="imagecache-medium caption0" title=Pyramids alt=Pyramids src="https://www.mcgill.ca/inb/sites/mcgill.ca.inb/files/imagecache/medium/images/pyramid-giza.jpg" caption="Pyramids"> The final report should include: scope statement, work methods, transfer to operations, acceptance criteria, etc. The final report should include: scope statement, work methods, transfer to operations, acceptance criteria, etc. <br><br><br><br></p></div> 

---