Tabs

<div class="Tabs">
    <ul class="Tablist">
        <li><a href="#panel-01" class="Tab" aria-selected="true">
Upcoming Events
</a></li>
        <li><a href="#panel-02" class="Tab">
Past Events
</a></li>
        <li><a href="#panel-03" class="Tab">
Panel 3
</a></li>
    </ul>
    <section class="Panel" id="panel-01">
        <p>Upcoming Events</p>
    </section>
    <section class="Panel" id="panel-02" hidden>
        <p>Past Events</p>
    </section>
    <section class="Panel" id="panel-03" hidden>
        <p>Panel 3</p>
    </section>
</div>
<div class="Tabs">
{% include '@tablist' with tabs %}
{% include '@panellist' with tabs %}
</div>
{
  "tabs": [
    {
      "tabText": "Upcoming Events",
      "panelId": "panel-01",
      "panelContent": "<p>Upcoming Events</p>",
      "tabIsSelected": true
    },
    {
      "tabText": "Past Events",
      "panelId": "panel-02",
      "panelContent": "<p>Past Events</p>"
    },
    {
      "tabText": "Panel 3",
      "panelId": "panel-03",
      "panelContent": "<p>Panel 3</p>"
    }
  ]
}

There are no notes for this item.