Accordion
On this page
How to use an Accordion
An Accordion is a list of content sections that hide or reveal additional content when selected. Accordions simplify longer pages by “collapsing” sections of content.
- Use on a Landing Page or on a Basic Page.
- Each Accordion can have between three and twenty individual Accordion items.
Watch: How to create an Accordion
See how to create an Accordion on your website.
Example: Accordion Group
Welcome to the Old Line State, a destination where the "America in Miniature" spirit thrives from the rolling Appalachian foothills to the sun-drenched Atlantic coastline.
Experience the rhythmic pulse of the Chesapeake Bay, where the historic Skipjack remains a symbol of our enduring connection to the water. From the brackish estuaries of the Eastern Shore to the deep mountain lakes of the Western Region, the Maryland landscape serves as a living classroom for conservation and discovery. Whether you are exploring the secret network of the Underground Railroad or navigating the bustling corridors of the Capital Region, our communities reflect a proud tradition of resilience and hospitality.
Savor the authentic flavors of the Chesapeake with a seat at a traditional backyard crab feast, seasoned with local history and a dash of coastal charm. As the official state crustacean, the blue crab represents more than just a culinary delight; it is a centerpiece of our seasonal festivals and a driver of our thriving tourism economy. Beyond the waterfront, our diverse culinary landscape invites you to explore artisan creameries in Frederick County and legendary bakeries on the shores of Smith Island.
Our state parks serve as the crown jewels of the Maryland wilderness, preserving over 100,000 acres of natural beauty and historic landmarks. At Cunningham Falls State Park, visitors can marvel at the state's largest cascading waterfall, while Calvert Cliffs offers a unique opportunity to hike along sandy beaches in search of prehistoric fossils. These public lands are more than just recreational outlets; they are vital sanctuaries where residents can practice "Leave No Trace" ethics and connect with the native flora and fauna that make "America in Miniature" so ecologically rich.
Required fields
1. Accordion Group Title – 75 characters max
The Accordion Group Title introduces a group of Accordion items. It provides context for how the Accordion items are related to one another. The Accordion Group Title can optionally be hidden on screen.
2. Title – 255 characters max
Each Accordion item has its own Accordion Title, which is always displayed. When clicked or tapped, the Accordion TItle expands to show the Accordion Description.
3. Description – Unlimited characters
Each Accordion item has an Accordion Description, which website visitors see when the Accordion item is expanded. The Accordion Description can include any features of the Text Editor, including bold, italics, bulleted lists, numbered lists, links, or tables.
Optional fields
1. Accordion Group Description – 250 characters max
The Accordion Group Description is optional. You can use it to provide additional context for the group of Accordion items. The Accordion Group Description also allows for text links.
When to consider something else
Use the Text Editor if visitors need to see all the content at the same time.
Avoid using an Accordion for very brief content that is less than 3 sentences.
Get support
Ask questions about the Maryland Drupal CMS, Maryland Web Design System (MDWDS), accessibility, plain language, and more.