Accordions

An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. Allowing users to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore. Within the CMS the content owners will have the ability to include accordions in the main content area of the page and have an unlimited number of rows.

NOTE: Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions.

Available in: Gateway, Universal and Department pages.

Rendered HTML

Accordion 1

Vnisl. Vivamus consequat sollicitudin semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis mattis risus ut posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut malesuada egestas ante, ut porttitor turpis facilisis sed. Pellentesque ac ligula eget lacus hendrerit placerat ac vel justo. Quisque nec nulla pharetra augue mattis congue et a nulla. In cursus nisi nec luctus pulvinar. Mauris tincidunt, ex vel luctus commodo, lectus eros iaculis quam, ac rutrum velit velit quis mi. Nullam lacinia lectus sed diam porta, nec gravida eros dapibus. Suspendisse vel nunc augue. Morbi congue leo arcu, vel blandit nisi facilisis vel. Vivamus et quam condimentum, accumsan elit eget, volutpat nunc.

Accordion 2

Accordion 3

HTML Source

Click the copy icon button to copy the HTML example code.


<section aria-label="Accordions" class="accordion">
  <div class="wrapper">
    <!-- START: Accordion method -->
    <div class="accRow">
        <input id="Acc-1-Accordion1-Accordions" type="checkbox" />
        <h3><label for="Acc-1-Accordion1-Accordions" title="Accordion 1">Accordion 1</label></h3>
        <div class="wysiwygContent">Vnisl. Vivamus consequat sollicitudin semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis mattis risus ut posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut malesuada egestas ante, ut porttitor turpis facilisis sed. Pellentesque ac ligula eget lacus hendrerit placerat ac vel justo. Quisque nec nulla pharetra augue mattis congue et a nulla. In cursus nisi nec luctus pulvinar. Mauris tincidunt, ex vel luctus commodo, lectus eros iaculis quam, ac rutrum velit velit quis mi. Nullam lacinia lectus sed diam porta, nec gravida eros dapibus. Suspendisse vel nunc augue. Morbi congue leo arcu, vel blandit nisi facilisis vel. Vivamus et quam condimentum, accumsan elit eget, volutpat nunc.</div>
    </div>
    <div class="accRow">
        <input id="Acc-2-Accordion2-Accordions" type="checkbox" />
        <h3><label for="Acc-2-Accordion2-Accordions" title="Accordion 2">Accordion 2</label></h3>
        <div class="wysiwygContent">Vnisl. Vivamus consequat sollicitudin semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis mattis risus ut posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut malesuada egestas ante, ut porttitor turpis facilisis sed. Pellentesque ac ligula eget lacus hendrerit placerat ac vel justo. Quisque nec nulla pharetra augue mattis congue et a nulla. In cursus nisi nec luctus pulvinar. Mauris tincidunt, ex vel luctus commodo, lectus eros iaculis quam, ac rutrum velit velit quis mi. Nullam lacinia lectus sed diam porta, nec gravida eros dapibus. Suspendisse vel nunc augue. Morbi congue leo arcu, vel blandit nisi facilisis vel. Vivamus et quam condimentum, accumsan elit eget, volutpat nunc.</div>
    </div>
    <div class="accRow">
        <input id="Acc-3-Accordion3-Accordions" type="checkbox" />
        <h3><label for="Acc-3-Accordion3-Accordions" title="Accordion 3">Accordion 3</label></h3>
        <div class="wysiwygContent">Vnisl. Vivamus consequat sollicitudin semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis mattis risus ut posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut malesuada egestas ante, ut porttitor turpis facilisis sed. Pellentesque ac ligula eget lacus hendrerit placerat ac vel justo. Quisque nec nulla pharetra augue mattis congue et a nulla. In cursus nisi nec luctus pulvinar. Mauris tincidunt, ex vel luctus commodo, lectus eros iaculis quam, ac rutrum velit velit quis mi. Nullam lacinia lectus sed diam porta, nec gravida eros dapibus. Suspendisse vel nunc augue. Morbi congue leo arcu, vel blandit nisi facilisis vel. Vivamus et quam condimentum, accumsan elit eget, volutpat nunc.</div>
    </div>
  </div>
</section>