<header>
  <p>
    <a target="_blank" href="https://tabpanelwidget.com">
      <img decoding="async" src="https://tabpanelwidget.com/icon.eff9d2cc.png" alt="TabPanelWidget" width="72" height="72"></a>
  </p>
</header>
<!--
Check the list of available classes in the Usage section
And then add classes to the Widget to change its styling
i.e: <div class="tpw-widget tpw-bar tpw-centered">
-->
<p>
  <button id="mount-toggle">mount/unmount</button>
</p>
<div id="widget" class="tpw-widget tpw-fancy tpw-rounded">
  <h3 class="tpw-selected">Markup</h3>
  <p>Here is the bare minimum:</p>
  <pre><code>
&lt;div class=&quot;tpw-widget&quot;&gt;
  &lt;h3&gt;FUBAR&lt;/h3&gt;
  &lt;p&gt;Lorem...&lt;/p&gt;
  &lt;h3&gt;SNAFU&lt;/h3&gt;
  &lt;p&gt;Ipsum...&lt;/p&gt;
  &lt;h3&gt;FUMTU&lt;/h3&gt;
  &lt;p&gt;Dolor...&lt;/p&gt;
  &lt;h3&gt;FUAFUP&lt;/h3&gt;
  &lt;p&gt;Sit Amet...&lt;/p&gt;
&lt;/div&gt;
</code></pre>

  <p>Note:</p>
  <ul>
    <li>The wrapper can be ANYTHING (an <code>article</code>, a <code>div</code>, a <code>dl</code>, whatever)</li>
    <li>You can use ANY, and as many, same-level headings within the Widget</li>
    <li>You can have ANYTHING between the headings</li>
    <li>If you use a Definition List it must ONLY contains <code>dt</code>/<code>dd</code> pairs</li>
  </ul>

  <h3>Stylesheet</h3>
  <p>Insert the following inside the <code>&lt;head&gt;</code> of your document:</p>
  <pre><code>
&lt;link href=&quot;//cdn.jsdelivr.net/npm/tabpanelwidget@1.0.2/dist/tabpanelwidget.min.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>
  <h3>Script</h3>
  <p>Insert the following before <code>&lt;/body&gt;</code>:</p>
  <pre><code>
&lt;script src="//cdn.jsdelivr.net/npm/tabpanelwidget@1.0.2/dist/tabpanelwidget.min.js">&lt;/script&gt;
&lt;script&gt;
  // remove this if you do not want to serve the polyfill
  if (!window.ResizeObserver) {
    const script = document.createElement("script")
    script.src = "//cdn.jsdelivr.net/npm/tabpanelwidget@1.0.2/dist/tabpanelwidget-polyfill.min.js"
    document.head.appendChild(src)
  }
  // instantiate the script
  Tabpanelwidget.autoinstall();
&lt;/script&gt;</code></pre>

  <h3>Usage</h3>
  <p>You can apply the following classes to the Widget to change its styling:</p>
  <ul>
    <li>
      <p><strong><code>tpw-widget</code></strong> (REQUIRED):</p>
      <ul>
        <li>this will style the widget as a TabPanel as long as there is enough room for the tabs to be displayed side-by-side</li>
        <li>this will style the widget as an Accordion if there is <em>not</em> enough room for the tabs to be displayed side-by-side</li>
      </ul>
    </li>
    <li>
      <p>Optional classes:</p>
      <ul>
        <li>
          <p>For TabPanel:</p>
          <ul>
            <li>
              <code>tpw-tabpanel</code>: this will <em>force</em> the Widget to display as a TabPanel <em>no matter what</em>
            </li>
            <li>
              <code>tpw-fancy</code>: this will style all the tabs (unlike the default styling that only styles the active heading as a tab)</li>
            <li>
              <code>tpw-pills</code>: this will display the tabs as pills ("à la Bootstrap")</li>
            <li>
              <code>tpw-bar</code>: this will not style the "tabs" as tabs. Instead, it will display a border below the text/headings</li>
            <li>
              <code>tpw-centered</code>: this will center the tabs above the panel</li>
            <li>
              <code>tpw-rounded</code>: this will add a border-radius to the tabs and panel</li>
          </ul>
        </li>
        <li>
          <p>For Accordion:</p>
          <ul>
            <li>
              <code>tpw-accordion</code>: this will force the widget to display as an Accordion (regardless of its width)</li>
            <li>
              <code>tpw-disconnected</code>: this will create space between the headers and style them with rounded corners</li>
            <li>tpw-icons-at-the-end: this will display the icons (chevrons, +/-, etc.) on the opposite side of the headers's text</li>
            <li>
              <code>tpw-chevrons-east-south</code>: this will overwrite the default orientation of the chevrons (South/North) to make them point East/South (West/South in RTL scripts)</li>
            <li>
              <code>tpw-plus-minus</code>: this will replace the "chevron" icons with "+" and "-" signs</li>
            <li>
              <code>tpw-animate</code>: this will "animate" the "chevron" icons between their state</li>
          </ul>
        </li>
        <li>
          <p>For the headings</p>
          <ul>
            <li>
              <code>tpw-selected</code>: this class, once applied to a heading (or a <code>dt</code>), will open the panel associated with that heading
              <ul>
                <li>in case <code>tpw-selected</code> is not present on any heading then no panel is open in Accordions and the 1st panel is open in TabPanels</li>
                <li>TabPanels can only have one instance of <code>tpw-selected</code>, but Accordions do not have that restriction (more than one panel can be open at once)</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <p>
    <strong>Note</strong>: some of the above classes can be mixed, for example:</p>
  <pre><code>&lt;div class="tpw-widget tpw-pills tpw-rounded tpw-centered"&gt;</code></pre>
</div>
<!-- /.tpw-widget -->