Drupal: Creating Accordions

This article demonstrates the process of creating accordion sections within a web page.

Summary

In this article, we will demonstrate the process of creating accordion sections within a web page using both the Panelizer and Paragraphs features.

• Use the Panelizer Feature to create accordion sections
• Use the Paragraphs Feature to create accordion sections

Please note: accordion sections are managed differently depending on which Drupal build you are working in. We will be using using both the Panelizer feature, found in the top-level UNH.edu build, and the Paragraphs feature, found in the Drupal current build.

 

Related Video(s)

Please note: accordion sections are managed differently depending on which Drupal build you are working in. In this video, we will be using using both the Panelizer feature, found in the top-level UNH.edu build, and the Paragraphs feature, found in the Drupal current build.

 

How-To

Panelizer Feature

In this first segment, we will describe modifying an existing web page using the Panelizer feature, found in the top-level UNH.edu build.

Instructions

Step 1 - Click on the "Customize this page" button and navigate to the paneled region where you would like to place your accordion sections

Step 2 - In the light blue panel placeholder, click on the "Add new pane" (plus sign) icon

Step 3 - In the "Add content..." window, a choice of content types is available in the upper left section of tabs. Select the tab "Add Bootstrap Accordion"

Please note: Bootstrap accordions are managed in one or more accordion "Panes." Accordion panes can be added and/or removed as needed. In this example, we will create and configure two drop-down accordions.

Step 4 - In the "Configure new Add Bootstrap Accordion" window, the first "Title" field is optional. If text is added here it will appear on the basic page above the accordions, and display as Heading (Level) 2. The second field, "View mode," should remain as "Full"

Step 5 - In the area labeled "Panes (1)," enter text in the "Title" field - this text will display on the basic page and will become the hyperlink used to initiate the drop-down effect of the accordion.

Step 6 - Next, enter text into the "Body" field, encompassed by the WYSIWYG editor. When editing is complete, scroll down and click on the "ADD ANOTHER ITEM," then scroll back up and click on the "Panes (2)" tab, then repeat the editing process described previously.

Step 7 - When editing is complete, scroll down and click on the "FINISH" button.

Step 8 - To complete the process, click on the "SAVE" button and test your accordion functionality.

Your basic page will contain accordion sections, and clicking on each will produce the drop-down effect and display the body content.

 

Outcome

An accordion section has been created with Panelizer.

Back to top

 

Paragraphs Feature

In this next segment, we will be modifying an existing web page by adding accordion sections using the Paragraphs feature, found in the Drupal current build.

Instructions

Step 1 - Click on the "Edit" tab and scroll down the page to the section labeled "Paragraphs"

Step 2 - In the "Paragraph type" drop-down, choose "Layout: Accordion," then click on the "ADD NEW PARAGRAPH" button

Step 3 - If you would like a title to appear on the page, enter text in the "Title" field.

Please note: Titles, in this case, are consider headers and can be formatted using presets found in the Styles tab.

Step 4 - If you wish all accordion sections to be collapsed when a visitor arrives on your page, click the checkbox next to "Collapse First Section" - this is optional

Step 5 - Next you will be adding accordion sections, then content Paragraphs within each section. Click on the green "ADD LAYOUT: ACCORDION SECTION" button to add the first section.

Step 6 - Enter the "Accordion Section Title" - this is the text that will show up in the clickable accordion box.

Step 7 - Next, add Accordion Section Content by choosing a Paragraph type in the corresponding dropdown, and then clicking on the "ADD NEW PARAGRAPH" button. In this example, we will choose the "Text" Paragraph type. Here, the the "Title" field is optional, and "Content" is added via a WYSIWYG editor.

Step 8 - Add your content, and then scroll down to the bottom of the page and click on "Save".

Your new accordion section will display on your page, and clicking on it will drop down the section content. Repeat these steps to create additional accordion sections, if needed.

 

Outcome

An accordion section has been created with Panelizer.

Back to top

 

Want to learn more?

Additional help on this and other related topics is available during a regularly scheduled Drupal/Sites@USNH/Website Tools - Walk-in/Zoom-in Session. More information, including a complete schedule, is available at Drupal/Sites@USNH/Website Tools - Virtual Walk-in Session.

 

Need additional help?

If you have any additional questions, please fill out the Website & Mobile Development & Design Support Form.