hologram-web-library/src/scripts/hw_collapsible-content.js

Hologram Web Library components

export default () => {
  (function (collapsibleContent) {
    "use strict";

    function attachClickListeners() {
      const collapsibleElems = document.getElementsByClassName("collapsible-content");

      for (let i = 0; i < collapsibleElems.length; i++) {
        const collapsibleElem = collapsibleElems[i];
        const sectionId = collapsibleElem.dataset.sectionId;

        const contentRows = collapsibleElem.getElementsByClassName("collapsible-content-row");

        if (contentRows.length > 0) {
          for (let j = 0; j < contentRows.length; j++) {
            const contentRow = contentRows[j];
            const blockId = contentRow.dataset.blockId;
            const toggleButton = document.getElementById(`Summary-${blockId}-${sectionId}`);
            const toggleButtonOverlay = document.getElementById(`SummaryOverlay-${blockId}-${sectionId}`);

            toggleButton.addEventListener("mouseover", function () {
              toggleButtonOverlay.style.display = "block";
            });

            toggleButton.addEventListener("mouseout", function () {
              toggleButtonOverlay.style.display = "none";
            });

            toggleButton.addEventListener("click", function () {
              const targetElem = document.getElementById(`CollapsibleAccordion-${blockId}-${sectionId}`);
              const iconPlus = document.getElementById(`IconPlus-${blockId}-${sectionId}`);
              const iconMinus = document.getElementById(`IconMinus-${blockId}-${sectionId}`);

              if (targetElem.style.display === "block") {
                targetElem.style.display = "none";
                iconPlus.style.display = "flex";
                iconMinus.style.display = "none";
              } else {
                targetElem.style.display = "block";
                iconPlus.style.display = "none";
                iconMinus.style.display = "flex";
              }
            });
          }
        }
      }
    }

    const init = () => {
      attachClickListeners();
    };

    collapsibleContent.init = init;
  })((window.collapsibleContent = window.collapsibleContent || {}));
};