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.

html
Copier le code

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:

html
Copier le code

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:

html
Copier le code

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

html
Copier le code