Inserting Accordions

* Note: You must be an advanced author to gain access to this functionality. Please contact the Director of Web Development to get access.

Accordions provide an extremely useful way to group and organize large amounts of content on a single page.  You have probably seen these on various different pages around the site.  Here is an example:

Step 0

  1. Place your cursor in the area that you would like to insert the accordion on the page and click on the snippet icon in the 2nd row of the toolbar.

    Step 1

  2. Click on "Accordion-Headings" in the left window pane. Now, click on the blue "Insert" button.

    Step 2

  3. This will add a table with 2 columns to the page.  You will then add your accordion header to the left column and the content that you want in the accordion drop down to the right column.Step 3

* Note: Repeat the above steps for every accordion that you want added to your page.

If you want to add a nested accordion, follow the steps above, then:

  1. Place your cursor in the right column of an accordion you've already inserted/setup on the page and click the snippet icon in the second row of the toolbar:Step 4

  2. Click on "Accordion-Inner-Headings" in the left window pane. Now, click on the blue "Insert" button.

    Step 6

  3. This will nest another table with 2 columns to the inside of the accordion content/drop down area.  You will then add your nested accordion header to the left column and the content that you want in the nested accordion drop down to the right column.
    Step 5

  4. Click the blue "Save" button. At this point, your table(s) will be automatically transformed into the accordion(s).
  5. Remember to either "Save and Exit" if you want to make more edits later (the page will not be live) OR, simply click the green "Publish" button to make your changes live on the site.