Accordion: Default

There are no notes for this item.

<div id="Page10" class="ContentBlock accordion Page10">
    <ul id="accordion-group-10" role="presentation" 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>
                <article class="ContentBlock Feature Horz Page10">
                    <h2>
                        <a href="https://www.missouristate.edu">
            <img src="https://placehold.it/700x394" alt="">
            <span class="FeatureHeading">Lorem ipsum dolor sit amet consectetur</span>
        </a>
                    </h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.
                    </p>
                </article>
            </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}}" role="presentation" 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": null,
  "item": [
    {
      "pageId": 1,
      "heading": "Accordion 1",
      "container": "<article class=\"ContentBlock Feature Horz Page10\">\n    <h2>\n        <a href=\"https://www.missouristate.edu\">\n            <img src=\"https://placehold.it/700x394\" alt=\"\">\n            <span class=\"FeatureHeading\">Lorem ipsum dolor sit amet consectetur</span>\n        </a>\n    </h2>\n    <p>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.\n    </p>\n</article>"
    },
    {
      "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?"
    }
  ]
}