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
Code kopieren
Expand

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
Code kopieren
Expand

Key points to remember:

• The <input> must have a uniqueid;

• 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
Code kopieren
Expand

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

html
Code kopieren
Expand