Skip to main content
An Official Vermont Government Website

Accordion 

The Accordion content type is helpful for pages that have a significant amount of content. They are interactive components that can be opened or collapsed.

There are three sets of steps to complete in order to create and place an Accordion within the content of a site. Step one is to add an accordion category. Step two is to add individual accordion items. Step three is to place the accordion.

Please Note: You must be logged in to the State of Vermont website that you are editing to follow the instructions below. 

Add an Accordion Category 

An accordion category is the overarching topic or heading that you will place individual accordion items within. It is helpful to add the accordion category as a first step so it is in the backend of the system when you add the individual accordion items.

  1. Structure

    Select 'Structure' on the top navigation. 

  2. Taxonomy

    Select 'Taxonomy'.

  3. Accordion Type

    Under the 'Accordion Type', select 'List terms' on the far right.

  4. +Add Term

    Select '+Add Term'.

  5. Name

    Enter the 'Name' (category) of the accordion.

  6. Optional: Description

    Enter the 'Description' for the category.

  7. Optional: Parent terms

    Under 'Relations', select the 'Parent terms' if any.

  8. Optional: Weight

    Under 'Relations', select the 'Weight' for the category. The weight is where you will specify where the category appears amongst the other 'Parent terms'.

  9. Optional: Generate automatic URL alias

    Check or uncheck 'Generate automatic URL alias'. It is checked by default. If you want to enter the URL manually, you can change it by unchecking 'Generate automatic URL alias'. Once deselected, enter your URL into the field.

  10. Save

    Select 'Save'.

  11. Structure

    Select 'Structure' on the top navigation.

  12. Taxonomy

    Select the 'Taxonomy' option.

  13. Accordion Type

    Under the 'Accordion Type', select 'List terms' on the far right to confirm that the 'Name' (category) you added is included.

Add Individual Accordion Items 

Now that you have added an accordion category, let's populate it with individual accordion items. The items will be individual buckets that can be opened or collapsed.

  1. Content

    Select 'Content' on the top navigation.

  2. +Add Content

    Select '+Add Content'.

  3. Accordion

    Select the 'Accordion' content type.

  4. Title

    Enter a 'Title'.

  5. Body

    Enter the 'Body' content. This will be what appears when a user opens the accordion item.

  6. Accordion to Apply To

    Select the 'Accordion to Apply to'. This is the 'Accordion Category' you created in the Add an Accordion Category step above.

  7. Save

    Select 'Save'.

Place the Accordion 

Now that you have added an accordion category and item(s) that should be included, the accordion needs to be placed on your website. Accordions are typically placed in the Content Top, Content, and Content Bottom regions.

  1. Content

    Select 'Content' on the top navigation.

  2. Identify a Page

    Search through the pages of your site to determine what page you would like the accordion to appear on.

  3. Edit

    When you have located the page on which the accordion will appear, select 'Edit' to the far left of the page listing.

  4. Accordion Category

    Under 'Accordion Category', select the name of the accordion you created in the Add an Accordion Category step above​​​​​​.

  5. URL Alias

    Under 'URL alias', select the URL and copy it.

  6. Save

    Select 'Save'.

  7. Block Layout

    Select 'Block layout'.

  8. Region

    Navigate to the template region you would like to place the accordion in, such as 'Content Top'.

  9. Place Block

    Select 'Place block'.

  10. Block List

    Enter 'Accordions List (Views)' in the search field.

  11. Place Block

    Select 'Place Block'.

  12. Configure Block

    In the 'Configure block' window, indicate if you would like to 'Display title' of the accordion. It is checked to 'Display title' by default. In the 'Pages' field, paste the URL you copied for the page where the accordion should appear.

  13. Save Block

    Select 'Save block'.

  14. Content

    Select 'Content' on the top navigation.

  15. Locate Page

    Locate the page on which you chose to place the accordion.

  16. View

    Click on the page title to view the page. Confirm that the accordion appears in the 'Content Top' region.

Example Accordion 

Below is an example of the Accordion content type.