PGxpbmsKICByZWw9InN0eWxlc2hlZXQiCiAgaHJlZj0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jMTA4NzM2My05MDI1LTRjMzctOGQ1ZS05ODNhMzJhMDA3ZTkvdGV4dC1ib3hlcy1zZWN0aW9uL2V4cGFuZGFibGUtbGlzdC9leHBhbmRhYmxlLWxpc3Qtc3R5bGVzLXYxLmNzcyIKLz4KCjxkaXYgY2xhc3M9ImFjY29yZGlvbi1jb250YWluZXIiPgogIDxkaXYgY2xhc3M9ImFjY29yZGlvbi1pdGVtIj4KICAgIDxpbnB1dCB0eXBlPSJjaGVja2JveCIgaWQ9ImFjY29yZGlvbi1pdGVtLTEiIC8+CiAgICA8bGFiZWwgZm9yPSJhY2NvcmRpb24taXRlbS0xIj5DcmVhdGUgYSBsaW5rPC9sYWJlbD4KICAgIDxkaXYgY2xhc3M9ImNvbnRlbnQiPgogICAgICA8dWw+CiAgICAgICAgPGxpPlNlbGVjdCB0aGUgY2VsbCB3aGVyZSB5b3Ugd2FudCB0byBpbnNlcnQgdGhlIGxpbms7PC9saT4KICAgICAgICA8bGk+R28gdG8gdGhlIDxiPkluc2VydDwvYj4gbWVudSDihpIgPGI+TGluazwvYj47PC9saT4KICAgICAgICA8bGk+CiAgICAgICAgICBFbnRlciB0aGUgVVJMIG9yIGNlbGwgcmVmZXJlbmNlIGluIHRoZQogICAgICAgICAgPGI+TGluazwvYj4gZmllbGQ7CiAgICAgICAgPC9saT4KICAgICAgICA8bGk+Q2xpY2sgPGI+QXBwbHk8L2I+IHRvIHNhdmUgdGhlIGxpbmsuPC9saT4KICAgICAgPC91bD4KICAgIDwvZGl2PgogIDwvZGl2PgoKICA8ZGl2IGNsYXNzPSJhY2NvcmRpb24taXRlbSI+CiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIGlkPSJhY2NvcmRpb24taXRlbS0yIiAvPgogICAgPGxhYmVsIGZvcj0iYWNjb3JkaW9uLWl0ZW0tMiI+Q2hhbmdlIG9yIHJlbW92ZSBhIGxpbms8L2xhYmVsPgogICAgPGRpdiBjbGFzcz0iY29udGVudCI+CiAgICAgIDx1bD4KICAgICAgICA8bGk+U2VsZWN0IHRoZSA8Y29kZT5jZWxsPC9jb2RlPiB3aXRoIHRoZSBleGlzdGluZyBsaW5rOzwvbGk+CiAgICAgICAgPGxpPlJpZ2h0LWNsaWNrIGFuZCBjaG9vc2UgPGI+RWRpdCBsaW5rPC9iPiB0byBtb2RpZnk7PC9saT4KICAgICAgICA8bGk+VG8gcmVtb3ZlLCBjbGljayA8Yj5SZW1vdmUgbGluazwvYj4uPC9saT4KICAgICAgPC91bD4KICAgIDwvZGl2PgogIDwvZGl2PgoKICA8ZGl2IGNsYXNzPSJhY2NvcmRpb24taXRlbSI+CiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIGlkPSJhY2NvcmRpb24taXRlbS0zIiAvPgogICAgPGxhYmVsIGZvcj0iYWNjb3JkaW9uLWl0ZW0tMyI+CiAgICAgIExpbmsgdG8gYSByYW5nZSBvZiBjZWxscyBpbiBhIHNwcmVhZHNoZWV0CiAgICA8L2xhYmVsPgogICAgPGRpdiBjbGFzcz0iY29udGVudCI+CiAgICAgIDx1bD4KICAgICAgICA8bGk+U2VsZWN0IHRoZSBjZWxsIHdoZXJlIHlvdSB3YW50IHRvIGluc2VydCB0aGUgbGluazs8L2xpPgogICAgICAgIDxsaT5HbyB0byA8Yj5JbnNlcnQ8L2I+IOKGkiA8Yj5MaW5rPC9iPjs8L2xpPgogICAgICAgIDxsaT4KICAgICAgICAgIEVudGVyIHRoZSBzaGVldCBuYW1lIGFuZCBjZWxsIHJlZmVyZW5jZSAoZS5nLiwKICAgICAgICAgIDxiPlNoZWV0MiFBMTwvYj4pOwogICAgICAgIDwvbGk+CiAgICAgICAgPGxpPkNsaWNrIDxiPkFwcGx5PC9iPi48L2xpPgogICAgICA8L3VsPgogICAgPC9kaXY+CiAgPC9kaXY+CgogIDxkaXYgY2xhc3M9ImFjY29yZGlvbi1pdGVtIj4KICAgIDxpbnB1dCB0eXBlPSJjaGVja2JveCIgaWQ9ImFjY29yZGlvbi1pdGVtLTQiIC8+CiAgICA8bGFiZWwgZm9yPSJhY2NvcmRpb24taXRlbS00Ij4KICAgICAgR2V0IGluZm8gYWJvdXQgbGlua2VkIGRvY3VtZW50cyAmIHdlYnNpdGVzCiAgICA8L2xhYmVsPgogICAgPGRpdiBjbGFzcz0iY29udGVudCI+CiAgICAgIDx1bD4KICAgICAgICA8bGk+SG92ZXIgb3ZlciBhIGxpbmtlZCBjZWxsIG9yIHRleHQ7PC9saT4KICAgICAgICA8bGk+QSBwcmV2aWV3IHdpbGwgYXBwZWFyIHdpdGggZGV0YWlscyBhYm91dCB0aGUgbGluazs8L2xpPgogICAgICAgIDxsaT5DbGljayB0aGUgcHJldmlldyB0byB2aXNpdCB0aGUgbGlua2VkIGRvY3VtZW50IG9yIHdlYnNpdGUuPC9saT4KICAgICAgPC91bD4KICAgIDwvZGl2PgogIDwvZGl2Pgo8L2Rpdj4=

# 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
<div class="accordion-container">
  
</div>
```
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
<div class="accordion-item">
  <input type="checkbox" id="accordion-item-1" />
  <label for="accordion-item-1">Your Title Here</label>
  <div class="content">
    
  </div>
</div>
```
**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
<div class="accordion-item">
  <input type="checkbox" id="accordion-item-4" />
  <label for="accordion-item-4">
    Get info about linked documents & websites
  </label>
  <div class="content">
    <ul>
      <li>Hover over a linked cell or text;</li>
      <li>A preview will appear with details about the link;</li>
      <li>Click the preview to visit the linked document or website.</li>
    </ul>
  </div>
</div>
```
If your content is **just text** (not a list), use `<p>` inside `.content`:
```html
<div class="accordion-item">
  <input type="checkbox" id="accordion-item-5" />
  <label for="accordion-item-5">General Information</label>
  <div class="content">
    <p>
      This is general information. It can be a description or an explanation.
    </p>
  </div>
</div>
```
	

This section contains a variety of buttons, each designed to perform a specific function.

This section provides auxiliary tools that support content formatting and data manipulation.

This section contains additional features and tools designed to provide enhanced functionality.

This section contains various text box elements.

Please don't use any elements from this section, as it doesn't provide any value for the content development. Thank you!

Please note that the elements in this section are deprecated and no longer recommended for use. It would be best to avoid using them moving forward. Thank you!

Test UI Features

Expandable List

Element

Source Code

README

How to Use the Component

Creating an Accordion Item

Adding Content Inside an Accordion Item