index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Accordion</title>
    <link rel="stylesheet" href="dist/style.css" />

    <script type="module">
      // for working index.html "import gsap from "../../node_modules/gsap/index.js";" needs to be replaced inside "src/js/Accordion.js"
      import Accordion from "./src/js/Accordion.js";

      new Accordion(".js-accordion", {
        openDuration: 1,
        openDelay: 0.5,
        openingEase: "bounce.out",
        onCloseStart: (header, content) => {
          console.log("close start", header, content);
        },
        onCloseComplete: (header, content) => {
          console.log("close complete", header, content);
        },
        onOpenStart: (header, content) => {
          console.log("open start", header, content);
        },
        onOpenComplete: (header, content) => {
          console.log("open complete", header, content);
        },
      });
    </script>

    <style>
      .js-accordion {
        border: 1px solid;
      }

      .js-accordion-header {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <a href="https://www.bornfight.studio/">
      <img
        width="84px"
        src="https://www.bornfight.com/wp-content/themes/bf/static/ui/BF-sign-dark.svg?"
        title="Bornfight Studio"
        alt="Bornfight Studio"
      />
    </a>

    <h1>Mono with slingle item header as hit area</h1>
    <p>
      <strong> (main wrapper "js-accordion" have "is-mono" class) </strong>
    </p>
    <div class="js-accordion is-mono">
      <div class="js-accordion-single">
        <div class="js-accordion-header">
          <p>Accordion header title 1</p>
        </div>
        <div class="js-accordion-panel">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor
          ligula enim, nec finibus dui pretium in. Curabitur sit amet vulputate
          leo. Maecenas vulputate velit et dui pellentesque lacinia.
          Pellentesque et scelerisque nisi. Suspendisse nec elementum mauris.
          Sed vitae est felis. Etiam aliquam efficitur massa id imperdiet. Donec
          sed feugiat lorem. Sed vel facilisis diam.
        </div>
      </div>

      <div class="js-accordion-single">
        <div class="js-accordion-header">
          <p>Accordion header title 2</p>
        </div>
        <div class="js-accordion-panel">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor
          ligula enim, nec finibus dui pretium in. Curabitur sit amet vulputate
          leo. Maecenas vulputate velit et dui pellentesque lacinia.
          Pellentesque et scelerisque nisi. Suspendisse nec elementum mauris.
          Sed vitae est felis. Etiam aliquam efficitur massa id imperdiet. Donec
          sed feugiat lorem. Sed vel facilisis diam.
        </div>
      </div>
    </div>

    <br />
    <br />

    <h1>Initially opened</h1>
    <p>
      <strong> (wrapper "js-accordion-single" and "js-accordion-header" have "is-opened" class) </strong>
    </p>
    <div class="js-accordion">
      <div class="js-accordion-single is-opened">
        <div class="js-accordion-header is-opened">
          <p>Accordion header title 1</p>
        </div>
        <div class="js-accordion-panel">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor
          ligula enim, nec finibus dui pretium in. Curabitur sit amet vulputate
          leo. Maecenas vulputate velit et dui pellentesque lacinia.
          Pellentesque et scelerisque nisi. Suspendisse nec elementum mauris.
          Sed vitae est felis. Etiam aliquam efficitur massa id imperdiet. Donec
          sed feugiat lorem. Sed vel facilisis diam.
        </div>
      </div>

      <div class="js-accordion-single">
        <div class="js-accordion-header">
          <p>Accordion header title 2</p>
        </div>
        <div class="js-accordion-panel">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor
          ligula enim, nec finibus dui pretium in. Curabitur sit amet vulputate
          leo. Maecenas vulputate velit et dui pellentesque lacinia.
          Pellentesque et scelerisque nisi. Suspendisse nec elementum mauris.
          Sed vitae est felis. Etiam aliquam efficitur massa id imperdiet. Donec
          sed feugiat lorem. Sed vel facilisis diam.
        </div>
      </div>
    </div>

    <br />
    <br />

    <h1>Slingle item header as hit area</h1>
    <div class="js-accordion">
      <div class="js-accordion-single">
        <div class="js-accordion-header">
          <p>Accordion header title 1</p>
        </div>
        <div class="js-accordion-panel">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor
          ligula enim, nec finibus dui pretium in. Curabitur sit amet vulputate
          leo. Maecenas vulputate velit et dui pellentesque lacinia.
          Pellentesque et scelerisque nisi. Suspendisse nec elementum mauris.
          Sed vitae est felis. Etiam aliquam efficitur massa id imperdiet. Donec
          sed feugiat lorem. Sed vel facilisis diam.
        </div>
      </div>

      <div class="js-accordion-single">
        <div class="js-accordion-header">
          <p>Accordion header title 2</p>
        </div>
        <div class="js-accordion-panel">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor
          ligula enim, nec finibus dui pretium in. Curabitur sit amet vulputate
          leo. Maecenas vulputate velit et dui pellentesque lacinia.
          Pellentesque et scelerisque nisi. Suspendisse nec elementum mauris.
          Sed vitae est felis. Etiam aliquam efficitur massa id imperdiet. Donec
          sed feugiat lorem. Sed vel facilisis diam.
        </div>
      </div>
    </div>

    <br />
    <br />

    <h1>Slingle item full body as hit area</h1>
    <div class="js-accordion">
      <div class="js-accordion-single js-accordion-header">
        <div>
          <p>Accordion header title 1</p>
        </div>
        <div class="js-accordion-panel">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor
          ligula enim, nec finibus dui pretium in. Curabitur sit amet vulputate
          leo. Maecenas vulputate velit et dui pellentesque lacinia.
          Pellentesque et scelerisque nisi. Suspendisse nec elementum mauris.
          Sed vitae est felis. Etiam aliquam efficitur massa id imperdiet. Donec
          sed feugiat lorem. Sed vel facilisis diam.
        </div>
      </div>

      <div class="js-accordion-single js-accordion-header">
        <div>
          <p>Accordion header title 2</p>
        </div>
        <div class="js-accordion-panel">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor
          ligula enim, nec finibus dui pretium in. Curabitur sit amet vulputate
          leo. Maecenas vulputate velit et dui pellentesque lacinia.
          Pellentesque et scelerisque nisi. Suspendisse nec elementum mauris.
          Sed vitae est felis. Etiam aliquam efficitur massa id imperdiet. Donec
          sed feugiat lorem. Sed vel facilisis diam.
        </div>
      </div>
    </div>
  </body>
</html>