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 Options2
- 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 Options2
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" class="is-small" />

              <span class="body-text-2 u-bold">Advanced Options</span>

              <span class="inline-tag">2</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" class="is-small" checked="true" />

                      <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" class="is-small" />

                      <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" class="is-small" checked="true" />

                      <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" class="is-small" />

              <span class="body-text-2 u-bold">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 is-disabled">

            <summary class="collapsible-button" tabIndex="-1">

              <input type="checkbox" class="is-small" disabled />

              <span class="body-text-2 u-bold u-color-text-disabled">Advanced Options</span>

              <span class="inline-tag is-disabled">2</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>

Disabled Item

Advanced Options4


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

        <li class="collapsible-item">

          <details class="collapsible-wrapper is-disabled">

            <summary class="collapsible-button">

              <input type="checkbox" class="is-small" disabled />

              <span class="body-text-2 u-bold u-color-text-disabled">Advanced Options</span>

              <span class="inline-tag is-disabled"><span class="text">4</span></span>

              <div class="icon">

                <span class="icon-cheveron-down u-color-text-disabled" aria-hidden="true"></span>

              </div>

            </summary>

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

          </details>

        </li>

      </ul>

Collapsible with info items

Advanced Options
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
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
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
Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired.


      <div class="card u-width-full-line">

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

          <li class="collapsible-item is-info">

            <details class="collapsible-wrapper">

              <summary class="collapsible-button u-gap-16">

                <div class="avatar is-size-small">

                  <span class="icon-question-mark-circle" aria-hidden="true"></span>

                </div>

                <span class="body-text-2 u-bold">Advanced Options</span>

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

              </summary>

              <div

                class="collapsible-content u-padding-inline-start-48 u-padding-inline-end-32 u-margin-inline-start-2"

              >

                <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 is-info">

            <details class="collapsible-wrapper">

              <summary class="collapsible-button u-gap-16">

                <div class="avatar is-size-small">

                  <span class="icon-question-mark-circle" aria-hidden="true"></span>

                </div>

                <span class="body-text-2 u-bold">Advanced Options</span>

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

              </summary>

              <div

                class="collapsible-content u-padding-inline-start-48 u-padding-inline-end-32 u-margin-inline-start-2"

              >

                <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 is-info">

            <details class="collapsible-wrapper">

              <summary class="collapsible-button u-gap-16">

                <div class="avatar is-size-small">

                  <span class="icon-question-mark-circle" aria-hidden="true"></span>

                </div>

                <span class="body-text-2 u-bold">Advanced Options</span>

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

              </summary>

              <div

                class="collapsible-content u-padding-inline-start-48 u-padding-inline-end-32 u-margin-inline-start-2"

              >

                <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 is-info">

            <div class="collapsible-wrapper is-disabled">

              <div class="collapsible-button u-gap-16">

                <div class="avatar is-size-small">

                  <span class="icon-question-mark-circle" aria-hidden="true"></span>

                </div>

                <span class="body-text-2 u-bold">Advanced Options</span>

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

              </div>

              <div

                class="collapsible-content u-padding-inline-start-48 u-padding-inline-end-32 u-margin-inline-start-2"

              >

                <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>

            </div>

          </li>

        </ul>

      </div>