Division of Information Technology Services

How Do I ... Add or edit an Accordion?

This is a Sample Accordion

Section 1

content for section 1 goes here aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa

Section 2

content for section 2 goes here bbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbb bbbbbb bbbbbb bbbbbb bbbbbbbbbb bbbbbb bbbbbbb bbb bbb

Section 3

content for section 3 goes here
  • ccccccccccccccccccccccccccccccccc
  • dddddddddddddddddddd
  • eeeeeeeeeeeeeee

To add an accordion to a web page:

  1. Copy & paste the code (see below) into the HTML window of your web page

  2. Edit the title or delete it if not needed

  3. Edit each Section to label each drawer

  4. Replace each drawer with your own content

Sample Accordion Code:

<h3>The Title Goes Here</h3>
<div class="accordion">

<h3><a href="#">Section 1 </a></h3>
<div>content for section 1 goes here<a href="http://www.uwo.ca/" target="_blank"> aaaaaaaaaaaaaaaaaaaaaa</a> aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa</div>

<h3><a href="#">Section 2 </a></h3>
<div>content for section 2 goes here bbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbb bbbbbb bbbbbb bbbbbb bbbbbbbbbb bbbbbb bbbbbbb bbb bbb</div>

<h3><a href="#">Section 3 </a></h3>
<div>content for section 3 goes here
<ul class="arrow-list">
<li>ccccccccccccccccccccccccccccccccc</li>
<li>dddddddddddddddddddd</li>
<li>eeeeeeeeeeeeeee</li>
</ul>
</div>
</div>

To add a new drawer:

  1. Copy the two lines of code for 'Section 2' (starts with <h3> and ends with </div>)

  2. Paste it after 'Section 3' (in between the two last /div lines)

  3. Edit the Section title & drawer content

Last updated on and Powered by Cascade Server