Jump to content

Accordion Component: Difference between revisions

From Swarthmore Knowledge Base
← Older edit
VisualWikitext
Kwhiteb1 (talk | contribs)
itsstaff
189 edits
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
The '''''Accordion''''' component allows you to create collapsible/expandable sections of content on your site.
{{DrupalBack}}
The '''Accordion''' component allows you to create collapsible and expandable sections of content on your site.


== Elements ==
== Elements ==


# Accordion Component - Title
# Accordion Component - Title
## Toggle '''''Show Title '''''to set the visibility of the component title.
## Toggle '''Show Title''' to set the visibility of the component title.
# Accordion Item - Title
# Accordion Item - Title
## Toggle '''''Initial State''''' to set the accordion item to ‘open’ or ‘closed’ on page load.
## Toggle '''Initial State''' to set the accordion item to '''Open''' or '''Closed''' on page load.
## Set '''Order''' value to rearrange display order of individual accordion items
## Set '''Order''' to rearrange the display order of individual accordion items.
# Accordion Item - Content
# Accordion Item - Content


[[File:Screenshot 2025-03-05 at 12.49.20 PM.png|800px|alt=Diagram of the elements of an accordion component]]
{{Screenshot|Screenshot 2025-03-05 at 12.49.20 PM.png|800px|Diagram showing the fields that make up the Accordion component.|The Accordion component fields.}}


== Examples ==
== Examples ==
{{Callout|type=tip|title=Interactive Example|content=The preview below shows the Accordion component using its default configuration.
To experiment with different layouts and other settings, open the interactive component playground.
'''[https://toolkit.swarthmore.edu/?path=/story/swarthmore-theme-components-accordion Open Component Playground]'''}}
{{StorybookComponent|id=swarthmore-theme-components-accordion|height=650}}
{{StorybookComponent|id=swarthmore-theme-components-accordion|height=650}}


== Step-by-step Instructions ==
== Step-by-step Instructions ==


# Add a '''''Title''''' for the accordion component. Toggle '''''Show Title '''''to set the visibility of the component title.
# Add a '''Title''' for the accordion component. Toggle '''Show Title''' to control whether the component title is displayed.
# Add an '''''Accordion Item''' ''to the component:
# Add an '''Accordion Item''' to the component:
## Add a '''''Title'''''.
## Add a '''Title'''.
## Toggle '''''Initial State''''' to set the item to display as open or closed on page load.
## Toggle '''Initial State''' to determine whether the item displays as '''Open''' or '''Closed''' when the page first loads.
## Add text to the '''''Content''''' field, which will populate the main body of the accordion item.
## Add text to the '''Content''' field. This will become the main body of the accordion item.
## Optionally, set an '''Order''' value to rearrange the display order of the accordion item. The lower the value, the higher up it will appear in the display order.
## Optionally, set an '''Order''' value to rearrange the display order of the accordion item. Lower values appear first.
# Add as many additional items as needed by clicking '''''Add Accordion Item'''''.
# Add as many additional accordion items as needed by clicking '''Add Accordion Item'''.
 


[[Category:Drupal]]
[[Category:Drupal]]
<!-- Imported from Confluence page id=172720129 (https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/172720129/Accordion+Component) -->

Latest revision as of 13:06, 10 July 2026

← Return to the Drupal User Guide

The Accordion component allows you to create collapsible and expandable sections of content on your site.

Elements

  1. Accordion Component - Title
    1. Toggle Show Title to set the visibility of the component title.
  2. Accordion Item - Title
    1. Toggle Initial State to set the accordion item to Open or Closed on page load.
    2. Set Order to rearrange the display order of individual accordion items.
  3. Accordion Item - Content
Diagram showing the fields that make up the Accordion component.
Figure: The Accordion component fields.

Examples

Interactive Example
The preview below shows the Accordion component using its default configuration.

To experiment with different layouts and other settings, open the interactive component playground.

Open Component Playground



Step-by-step Instructions

  1. Add a Title for the accordion component. Toggle Show Title to control whether the component title is displayed.
  2. Add an Accordion Item to the component:
    1. Add a Title.
    2. Toggle Initial State to determine whether the item displays as Open or Closed when the page first loads.
    3. Add text to the Content field. This will become the main body of the accordion item.
    4. Optionally, set an Order value to rearrange the display order of the accordion item. Lower values appear first.
  3. Add as many additional accordion items as needed by clicking Add Accordion Item.
Retrieved from "https://kb.swarthmore.edu/index.php?title=Accordion_Component&oldid=3557"