Accordion

The Accordion component is used to show and hide text, lists or links and can be expanded or collapsed as needed. This is used when long form information is needed on a single page to make it easily scannable.

Accordion

Used to give high-level, high-impact alerts to users.

This is an example of the text that displays when the accordion is expanded. It can also includes links that will look like this.

Nested Element Header

This is an example of nested element copy.
This is an example of nested element copy.

This is an example of child nested copy that is nested within the nested element.

This is an example of nested element copy.

Internal Link

This is an example of nested element copy.

External Link
Remember: Only your children are eligible for coverage. The children of your dependent children are not eligible for coverage under your plan unless you or your spouse is the child's court-appointed, legal guardian.

This is an example of the text that displays when the accordion is expanded. It can also includes links that will look like this.

Remember: Only your children are eligible for coverage. The children of your dependent children are not eligible for coverage under your plan unless you or your spouse is the child's court-appointed, legal guardian.

This is an example of the text that displays when the accordion is expanded. It can also includes links that will look like this.

Remember: Only your children are eligible for coverage. The children of your dependent children are not eligible for coverage under your plan unless you or your spouse is the child's court-appointed, legal guardian.


HTML
<div class="accordion">
  <div class="accordion-item js-dropdown">
    <button class="accordion-header js-dropdown-btn">
      <h3>
        Accordion Header
        <i class="fa-solid fa-chevron-up js-dropdown-icon"></i>
      </h3>
    </button>
    
    <div class="js-dropdown-content">
      <div class="accordion-content">
        <p>
          This is an example of the text that displays when the accordion is expanded. 
          It can also includes <a class="inline-link" href="#">links that will look like this</a>.
        </p>
        <div class="accordion-sub-content">
          <h4>Nested Element Header</h4>
          <div class="align-items-center gap-s">
            <span data-tippy-content="This is a Tooltip" data-tippy-theme="green" data-tippy-placement="top">
              <i class="fa-regular fa-circle-question text-teal"></i>
            </span>
            This is an example of nested element copy.
          </div>
          <hr>
          <div>
            <label class="custom-checkbox">
              <input type="checkbox">
              <span class="custom-checkbox-icon"></span>
              Default Checkbox Option
            </label>
          </div>
          <hr>
          <div>
            <div class="js-dropdown">
              <div class="js-dropdown-btn">
                This is an example of nested element copy.
                <i class="fa-solid fa-chevron-up js-dropdown-icon"></i>
              </div>
              <div class="js-dropdown-content">
                <div class="accordion-sub-content">
                  <p>This is an example of child nested copy that is nested within the nested element.</p>
                </div>
              </div>
            </div>
          </div>
          <hr>
          <div class="d-flex justify-content-between">
            <p>This is an example of nested element copy.</p>
            <a href="#" class="internal-link">Internal Link</a>
          </div>
          <hr>
          <div class="d-flex justify-content-between">
            <p>This is an example of nested element copy.</p>
            <a href="#" class="external-link" target="_blank">
              External Link
            </a>
          </div>
        </div>
        <div class="alert">
          <div>
            <strong>Remember:</strong> Only your children are eligible for coverage. 
            The children of your dependent children are not eligible for coverage 
            under your plan unless you or your spouse is the child's court-appointed, 
            legal guardian. 
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-item js-dropdown">
    <button class="accordion-header js-dropdown-btn">
      <h3>
        Accordion Header 2
        <i class="fa-solid fa-chevron-up js-dropdown-icon"></i>
      </h3>
    </button>
    <div class="js-dropdown-content">
      <div class="accordion-content">
        <p>
          This is an example of the text that displays when the accordion is expanded. 
          It can also includes <a class="inline-link" href="#">links that will look like this</a>.
        </p>
        <div class="alert">
          <div>
            <strong>Remember:</strong> Only your children are eligible for coverage. 
            The children of your dependent children are not eligible for coverage 
            under your plan unless you or your spouse is the child's court-appointed, 
            legal guardian. 
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-item js-dropdown">
    <button class="accordion-header js-dropdown-btn">
      <h3>
        Accordion Header 3
        <i class="fa-solid fa-chevron-up js-dropdown-icon"></i>
      </h3>
    </button>
    <div class="js-dropdown-content">
      <div class="accordion-content">
        <p>
          This is an example of the text that displays when the accordion is expanded. 
          It can also includes <a class="inline-link" href="#">links that will look like this</a>.
        </p>
        <div class="alert">
          <div>
            <strong>Remember:</strong> Only your children are eligible for coverage. 
            The children of your dependent children are not eligible for coverage 
            under your plan unless you or your spouse is the child's court-appointed, 
            legal guardian. 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>