Accordion

Accordion

HTML


<ul class="orc-c-accordion ">

  <li class="orc-c-accordion__item orc-js-accordion-item" id="accordion-panel-1">

    <div class="orc-c-accordion__header">

      <a href="#accordion-panel-1" class="orc-c-accordion__title orc-js-accordion-trigger">

                <span class="orc-c-accordion__title-text">Accordion 1</span>

                <svg class="orc-c-icon orc-c-accordion__icon orc-js-accordion-icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#plus"></use>
                </svg>


            </a>

    </div>
    <!-- end orc-c-accordion__header -->

    <div class="orc-c-accordion__body">

      <div class="orc-c-text-passage">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure.</p>
        <p>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui.</p>
        <h2>This is a second-level heading</h2>
        <p><a href='#'>Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. <em>Cras a erat a diam venenatis aliquam</em>. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque
          penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor.</p>
        <ol>
          <li>Ordered list item</li>
          <li>Another ordered list item</li>
          <li>Yet another ordered list item</li>
        </ol>
        <h3>This is a third-level heading</h3>
        <p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim
          scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.</p>
        <h3><a href='#'>This is a linked heading</a></h3>
        <ul>
          <li>Bulleted list item</li>
          <li>Another bulleted list item</li>
          <li>Yet bulleted list item</li>
          <li>And here's yet another bulleted list item</li>
        </ul>
        <blockquote>This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla <cite>Cite Source</cite></blockquote>
        <h4>This is a fourth-level heading</h4>
        <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus
          a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p>
        <h5>This is a fifth-level heading</h5>
        <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel.</p>
        <h6>This is a sixth-level heading</h6>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
      <!--end orc-c-text-passage-->

    </div>
    <!-- end orc-c-accordion__body -->

  </li>
  <!-- end orc-c-accordion__item -->
  <li class="orc-c-accordion__item orc-js-accordion-item" id="accordion-panel-2">

    <div class="orc-c-accordion__header">

      <a href="#accordion-panel-2" class="orc-c-accordion__title orc-js-accordion-trigger">

                <span class="orc-c-accordion__title-text">Accordion 2</span>

                <svg class="orc-c-icon orc-c-accordion__icon orc-js-accordion-icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#plus"></use>
                </svg>


            </a>

    </div>
    <!-- end orc-c-accordion__header -->

    <div class="orc-c-accordion__body">

      <div class="orc-c-text-passage">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure.</p>
        <p>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui.</p>
        <h2>This is a second-level heading</h2>
        <p><a href='#'>Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. <em>Cras a erat a diam venenatis aliquam</em>. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque
          penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor.</p>
        <ol>
          <li>Ordered list item</li>
          <li>Another ordered list item</li>
          <li>Yet another ordered list item</li>
        </ol>
        <h3>This is a third-level heading</h3>
        <p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim
          scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.</p>
        <h3><a href='#'>This is a linked heading</a></h3>
        <ul>
          <li>Bulleted list item</li>
          <li>Another bulleted list item</li>
          <li>Yet bulleted list item</li>
          <li>And here's yet another bulleted list item</li>
        </ul>
        <blockquote>This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla <cite>Cite Source</cite></blockquote>
        <h4>This is a fourth-level heading</h4>
        <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus
          a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p>
        <h5>This is a fifth-level heading</h5>
        <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel.</p>
        <h6>This is a sixth-level heading</h6>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
      <!--end orc-c-text-passage-->

    </div>
    <!-- end orc-c-accordion__body -->

  </li>
  <!-- end orc-c-accordion__item -->
  <li class="orc-c-accordion__item orc-js-accordion-item" id="accordion-panel-3">

    <div class="orc-c-accordion__header">

      <a href="#accordion-panel-3" class="orc-c-accordion__title orc-js-accordion-trigger">

                <span class="orc-c-accordion__title-text">Accordion 3</span>

                <svg class="orc-c-icon orc-c-accordion__icon orc-js-accordion-icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#plus"></use>
                </svg>


            </a>

    </div>
    <!-- end orc-c-accordion__header -->

    <div class="orc-c-accordion__body">

      <div class="orc-c-text-passage">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure.</p>
        <p>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui.</p>
        <h2>This is a second-level heading</h2>
        <p><a href='#'>Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. <em>Cras a erat a diam venenatis aliquam</em>. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque
          penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor.</p>
        <ol>
          <li>Ordered list item</li>
          <li>Another ordered list item</li>
          <li>Yet another ordered list item</li>
        </ol>
        <h3>This is a third-level heading</h3>
        <p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim
          scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.</p>
        <h3><a href='#'>This is a linked heading</a></h3>
        <ul>
          <li>Bulleted list item</li>
          <li>Another bulleted list item</li>
          <li>Yet bulleted list item</li>
          <li>And here's yet another bulleted list item</li>
        </ul>
        <blockquote>This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla <cite>Cite Source</cite></blockquote>
        <h4>This is a fourth-level heading</h4>
        <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus
          a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p>
        <h5>This is a fifth-level heading</h5>
        <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel.</p>
        <h6>This is a sixth-level heading</h6>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
      <!--end orc-c-text-passage-->

    </div>
    <!-- end orc-c-accordion__body -->

  </li>
  <!-- end orc-c-accordion__item -->

</ul>
<!-- end orc-c-accordion -->

When to use

Accordions are ideal when you have lots of content to display and either of these conditions apply:

only a compact space is available—too little to display everything at once
users will likely drill into only one portion of the content, and you wish to spare them the visual complexity of showing everything at once.

When to consider an alternative

If visitors need to see most or all of the information on a page or if there’s not enough content to justify condensing, use well-formatted text instead. Consider using Tabs if you have five or less content panels, and if the headings are a short tab-length. If you have just one element that you want to toggle into view, consider the Show More component.

The Show More component is also a better alternative if you’re organizing an entire page into an accordion-style presentation (like a Frequently Asked Questions page). The larger type size and header organization makes the expandable section better suited to page-level hierarchy than the accordion.

Class Name	Description
`orc-c-accordion` Required	Apply to the wrapper element for the overall component. The recommended element for this class is `<ul>`. This class handles the outer border and margins for the accordion.
`orc-c-accordion__item` Required	Apply to each immediate child `<li>` of the `orc-c-accordion` list. Each of these elements holds the heading and content for a single accordion item.
`orc-js-accordion-item` Modifier JS Required	Add to each `orc-c-accordion__item`. This class helps Orchid’s JavaScript library to open/close the `orc-c-accordion__item` by adding/removing the `is-closed` class.
`orc-c-accordion__header` Required	Apply to the wrapper for each item’s header element. The only child of this element is the `orc-c-accordion__title` element. The class handles the border, type size, and cursor type for each header. The recommended element for this class is `<div>`.
`orc-c-accordion__title` Required	Apply to the `<a>` element that contains the heading title for each item. The class handles the title’s text/icon layout, as well as the padding, color, and text treatment. This `<a>` contains the `orc-c-accordion__icon` and `orc-c-accordion__title-text` elements.
`orc-js-accordion-trigger` Modifier JS Required	Add to the `orc-c-accordion__title` element to help Orchid’s JavaScript library to toggle the display of the accordion item on click. To do this, Orchid adds/removes the `is-closed` class to the `orc-js-accordion-item` element.
`orc-c-accordion__icon` Required	Add to the `orc-c-icon` element that displays the icon (`#icon-caret-down`) to indicate that the accordion can be opened/closed. This element should be the first child of `orc-c-accordion__title`, before `orc-c-accordion__title-text`.
`orc-c-accordion__title-text` Required	Apply to the `<span>` element that contains the title of each accordion item.
`orc-c-accordion__body` Required	Apply to the container for each item’s body content. The recommended element for this class is `<div>`. The element can contain any arbitrary HTML.

Accordion `orc-c-accordion`

Usage

When to use

When to consider an alternative