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
• Add Individual Accordion Items
• Place the Accordion
• Example Accordion

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.