Collapsible

Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow you to progressively display information as desired.

Class	Type
`collapsible`	Collapsible	A class representing a collapsible

Components

Collapsible consist of five components:

Class	Type
`collapsible-item`	Item
`collapsible-wrapper`	Wrapper
`collapsible-button`	Button
`collapsible-button-optional`	Optional Label
`collapsible-content`	Content

Options one (optional)
Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired.
Options two (optional)
Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired.
Option three (optional)
Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired.


      <ul class="collapsible u-width-full-line">

        <li class="collapsible-item">

          <details class="collapsible-wrapper">

            <summary class="collapsible-button">

              <span class="text">Options one</span>

              <span class="collapsible-button-optional">(optional)</span>

              <div class="icon">

                <span class="icon-cheveron-down" aria-hidden="true">

                </span>

              </div>

            </summary>

            <div class="collapsible-content">

              <p class="text">

                <p class="text u-margin-block-start-8">

                  Collapsibles are used to display a vertical list of headers that reveal or hide content.

                  They allow to progressively disclose information as desired.

                </p>

              </p>

            </div>

          </details>

        </li>

        <li class="collapsible-item">

          <details class="collapsible-wrapper">

            <summary class="collapsible-button">

              <span class="text">Options two</span>

              <span class="collapsible-button-optional">(optional)</span>

              <div class="icon">

                <span class="icon-cheveron-down" aria-hidden="true">

                </span>

              </div>

            </summary>

            <div class="collapsible-content">

              <p class="text">

                <p class="text u-margin-block-start-8">

                  Collapsibles are used to display a vertical list of headers that reveal or hide content.

                  They allow to progressively disclose information as desired.

                </p>

              </p>

            </div>

          </details>

        </li>

        <li class="collapsible-item">

          <details class="collapsible-wrapper">

            <summary class="collapsible-button">

              <span class="text">Option three</span>

              <span class="collapsible-button-optional">(optional)</span>

              <div class="icon">

                <span class="icon-cheveron-down" aria-hidden="true">

                </span>

              </div>

            </summary>

            <div class="collapsible-content">

              <p class="text">

                <p class="text u-margin-block-start-8">

                  Collapsibles are used to display a vertical list of headers that reveal or hide content.

                  They allow to progressively disclose information as desired.

                </p>

              </p>

            </div>

          </details>

        </li>

      </ul>

Collapsible with Checkboxes

In the Appwrite console, collapsibles can contain checkboxes:

Advanced Options (optional)
- Subheading
  
  A clear description of what will happen if you select this option
- Subheading
  
  A clear description of what will happen if you select this option
- Subheading
  
  A clear description of what will happen if you select this option
Advanced Options (optional)
Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired.
Advanced Options (optional)
Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired.


      <ul class="collapsible u-width-full-line">

        <li class="collapsible-item">

          <details class="collapsible-wrapper" open>

            <summary class="collapsible-button">

              <input type="checkbox" />

              <span class="text">Advanced Options</span>

              <span class="collapsible-button-optional">(optional)</span>

              <div class="icon"><span class="icon-cheveron-down" aria-hidden="true"></span></div>

            </summary>

            <div class="collapsible-content u-margin-block-start-8 u-padding-inline-32">

              <div class="form">

                <ul class="form-list">

                  <li class="form-item">

                    <label class="choice-item">

                      <input type="checkbox" />

                      <div class="choice-item-content">

                        <div class="choice-item-title">Subheading</div>

                        <p class="choice-item-paragraph">

                          A clear description of what will happen if you select this option

                        </p>

                      </div>

                    </label>

                  </li>

                  <li class="form-item">

                    <label class="choice-item">

                      <input type="checkbox" />

                      <div class="choice-item-content">

                        <div class="choice-item-title">Subheading</div>

                        <p class="choice-item-paragraph">

                          A clear description of what will happen if you select this option

                        </p>

                      </div>

                    </label>

                  </li>

                  <li class="form-item">

                    <label class="choice-item">

                      <input type="checkbox" />

                      <div class="choice-item-content">

                        <div class="choice-item-title">Subheading</div>

                        <p class="choice-item-paragraph">

                          A clear description of what will happen if you select this option

                        </p>

                      </div>

                    </label>

                  </li>

                </ul>

              </div>

            </div>

          </details>

        </li>

        <li class="collapsible-item">

          <details class="collapsible-wrapper">

            <summary class="collapsible-button">

              <input type="checkbox" />

              <span class="text">Advanced Options</span>

              <span class="collapsible-button-optional">(optional)</span>

              <div class="icon"><span class="icon-cheveron-down" aria-hidden="true"></span></div>

            </summary>

            <div class="collapsible-content">

              <p class="text u-margin-block-start-8">

                Collapsibles are used to display a vertical list of headers that reveal or hide content.

                They allow to progressively disclose information as desired.

              </p>

            </div>

          </details>

        </li>

        <li class="collapsible-item">

          <details class="collapsible-wrapper">

            <summary class="collapsible-button">

              <input type="checkbox" />

              <span class="text">Advanced Options</span>

              <span class="collapsible-button-optional">(optional)</span>

              <div class="icon"><span class="icon-cheveron-down" aria-hidden="true"></span></div>

            </summary>

            <div class="collapsible-content">

              <p class="text u-margin-block-start-8">

                Collapsibles are used to display a vertical list of headers that reveal or hide content.

                They allow to progressively disclose information as desired.

              </p>

            </div>

          </details>

        </li>

      </ul>