Web Page Component: Accordion Web Management & Resources (Modern Campus CMS)

Using the Accordion Component to display collapse/expand menus

What is an Accordion Menu? 

An Accordion Menu is a collapsible content element used to organize information into expandable sections. Each section has a clickable title or header that, when selected, expands to reveal additional content—such as text, images, or links—while collapsing any other open sections if desired.

Accordions are commonly used on web pages to make long or detailed information easier to navigate. They help reduce scrolling, improve readability, and allow users to quickly access the specific content they’re interested in without being overwhelmed by large blocks of text.

Here's an example: 

---

How to Add an Accordion Component to Your Web Page

The Accordion Component allows you to organize long-form content into collapsible sections. This makes your page more user-friendly by letting visitors expand and collapse content as needed. Each accordion must have a unique ID to ensure it functions properly and does not conflict with other elements on the page.

Follow the steps below to add and configure an Accordion Component:

Step 1: Add the Required CSS Asset

Before adding any accordion menus to your page, you must include the Accordion Component CSS asset.

• Asset Name: Accordion Component CSS

• Asset ID: a:415389

This stylesheet ensures your accordion menus display and function correctly.

 

Step 2: Add the Accordion (Single) Component

Once the CSS asset has been added, you can begin placing accordion sections on your page.

1. Add the Component: Accordion (Single)

2. Assign a Unique ID:

   • Each accordion must have its own unique identifier (ID).

   • The ID can include letters or numbers (for example, menu-1, faq-2, sectionA).

   • Important: Do not reuse the same ID more than once on a single page.

3. Enter the Accordion Title:

   This title appears as the clickable header that expands or collapses the section.

4. Add Accordion Content:

   • Use the WYSIWYG editor to add your content within the accordion panel.

   • You may include text, images, links, or other formatting as needed.

Step 3: Save and Publish

After adding your accordion sections and customizing their content:

• Save your page.

• Publish the changes to make the accordion visible on your live site.

With these steps complete, your page will feature fully functional accordion menus that enhance organization and improve the user experience.