Missouri State University Pattern Library

Accordion

There are no notes for this item.

<div id="Page10" class="ContentBlock accordion Page10">
    <ul id="accordion-group-10" class="accordion-group" data-allow-toggle>
        <li id="Page1" class="accordion-item">
            <div role="heading" aria-level="2">
                <button aria-expanded="false" class="accordion-heading" aria-controls="panel-1" id="heading-1" type="button">
            <span class="accordion-title">
              Accordion 1
            </span>
            <span class="accordion-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">
                <g fill="none" fill-rule="evenodd" transform="translate(-6 -8)">
                  <path class="arrow" fill="#000" fill-rule="nonzero" d="m16.59 8.59-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z" />
                  <path d="m0 0h24v24h-24z" />
                </g>
              </svg>
            </span>
          </button>
            </div>
            <div id="panel-1" role="region" aria-labelledby="heading-1" class="accordion-panel hidden">
                <div class="ContentBlock tout Horz">
                    <div class="image-container">
                        <img class="image" src="http://picsum.photos/1920/1080?random" alt="">
                    </div>
                    <div class="container">
                        <div class="eyebrow">Lorem ipsum dolor</div>
                        <h3 class="headline"><a href="#">Lorem ipsum dolor sit amet consectetur</a></h3>
                        <p class="description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.
                        </p>
                    </div>
                </div>
            </div>
        </li>
        <li id="Page2" class="accordion-item">
            <div role="heading" aria-level="2">
                <button aria-expanded="false" class="accordion-heading" aria-controls="panel-2" id="heading-2" type="button">
            <span class="accordion-title">
              Accordion 2
            </span>
            <span class="accordion-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">
                <g fill="none" fill-rule="evenodd" transform="translate(-6 -8)">
                  <path class="arrow" fill="#000" fill-rule="nonzero" d="m16.59 8.59-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z" />
                  <path d="m0 0h24v24h-24z" />
                </g>
              </svg>
            </span>
          </button>
            </div>
            <div id="panel-2" role="region" aria-labelledby="heading-2" class="accordion-panel hidden">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore vitae dicta odio debitis sint, modi vel quasi veritatis? Fugit eum aspernatur dolor corporis maxime impedit perferendis aperiam odio deserunt. Ipsa?
            </div>
        </li>
        <li id="Page3" class="accordion-item">
            <div role="heading" aria-level="2">
                <button aria-expanded="false" class="accordion-heading" aria-controls="panel-3" id="heading-3" type="button">
            <span class="accordion-title">
              Accordion 3
            </span>
            <span class="accordion-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">
                <g fill="none" fill-rule="evenodd" transform="translate(-6 -8)">
                  <path class="arrow" fill="#000" fill-rule="nonzero" d="m16.59 8.59-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z" />
                  <path d="m0 0h24v24h-24z" />
                </g>
              </svg>
            </span>
          </button>
            </div>
            <div id="panel-3" role="region" aria-labelledby="heading-3" class="accordion-panel hidden">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore vitae dicta odio debitis sint, modi vel quasi veritatis? Fugit eum aspernatur dolor corporis maxime impedit perferendis aperiam odio deserunt. Ipsa?
            </div>
        </li>
    </ul>
</div>
<script type="text/javascript">
    missouristate.requireScript("../../scripts/components/collapsible.js", false);
</script>
 
<div id="Page{{pageId}}" class="ContentBlock accordion Page{{pageId}}">
  <ul id="accordion-group-{{pageId}}" class="accordion-group" data-allow-toggle {{#if allowMultiple}} data-allow-multiple {{/if}}>
    {{#each item}}
      <li id="Page{{pageId}}" class="accordion-item">
        <div role="heading" aria-level="2">
          <button aria-expanded="false" class="accordion-heading" aria-controls="panel-{{pageId}}" id="heading-{{pageId}}" type="button">
            <span class="accordion-title">
              {{heading}}
            </span>
            <span class="accordion-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">
                <g fill="none" fill-rule="evenodd" transform="translate(-6 -8)">
                  <path class="arrow" fill="#000" fill-rule="nonzero" d="m16.59 8.59-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z" />
                  <path d="m0 0h24v24h-24z" />
                </g>
              </svg>
            </span>
          </button>
        </div>
        <div id="panel-{{pageId}}" role="region" aria-labelledby="heading-{{pageId}}" class="accordion-panel hidden">
          {{#> container}}{{{container}}}{{/container}}
        </div>
      </li>
    {{/each}}
  </ul>
</div>
<script type="text/javascript">
  missouristate.requireScript("{{path '/scripts/components/collapsible.js'}}", false);

</script>
 
{
  "pageId": 10,
  "allowMultiple": false,
  "item": [
    {
      "pageId": 1,
      "heading": "Accordion 1",
      "container": "<div class=\"ContentBlock tout Horz\">\n    <div class=\"image-container\">\n        <img class=\"image\" src=\"http://picsum.photos/1920/1080?random\" alt=\"\">\n    </div>\n    <div class=\"container\">\n        <div class=\"eyebrow\">Lorem ipsum dolor</div>\n        <h3 class=\"headline\"><a href=\"#\">Lorem ipsum dolor sit amet consectetur</a></h3>\n        <p class=\"description\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.\n        </p>\n    </div>\n</div>"
    },
    {
      "pageId": 2,
      "heading": "Accordion 2",
      "container": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore vitae dicta odio debitis sint, modi vel quasi veritatis? Fugit eum aspernatur dolor corporis maxime impedit perferendis aperiam odio deserunt. Ipsa?"
    },
    {
      "pageId": 3,
      "heading": "Accordion 3",
      "container": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore vitae dicta odio debitis sint, modi vel quasi veritatis? Fugit eum aspernatur dolor corporis maxime impedit perferendis aperiam odio deserunt. Ipsa?"
    }
  ]
}