Element

Source Code

README

Expandable accordion component. It allows users to reveal or hide content inside collapsible sections.

How to Use the Component

Create the container for the accordion items.

Each accordion item consists of:

• A hidden checkbox (input[type="checkbox"]): controls expansion;
• A label (label): acts as the clickable trigger;
• A content container (div.content): holds the expandable content.

Creating an Accordion Item

Each item must follow this structure:

Key points to remember:

• The <input> must have a unique id;
• The <label> must have a matching for attribute that references the id of the checkbox;
• The .content section contains the content that will be shown or hidden when the label is clicked.

Adding Content Inside an Accordion Item

If your content requires a list of items, use <ul> and <li> inside .content:

If your content is just text (not a list), use <p> inside .content: