Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Expandable List | Text Boxes
Test UI Features
course content

Kursinnehåll

Test UI Features

Test UI Features

1. Buttons
2. ContentDev Tools
3. Image Tools
4. Links
5. Other
7. Tables
8. Developers

book
Expandable List

Element

Source Code

html

index.html

copy

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

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

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

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

html
Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 6. Kapitel 10

Fråga AI

expand
ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

course content

Kursinnehåll

Test UI Features

Test UI Features

1. Buttons
2. ContentDev Tools
3. Image Tools
4. Links
5. Other
7. Tables
8. Developers

book
Expandable List

Element

Source Code

html

index.html

copy

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

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

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

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

html
Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 6. Kapitel 10
Vi beklagar att något gick fel. Vad hände?
some-alt