Topic: Close Accordion

VJ
April 1, 2024 at 10:02 pm

I created a simple dropdown menu using the amazing Accordion block. This menu will help users to navigate to different sections of the page using smooth-scroll.

I have given the single Accordion item a unique class .vj-menu.

The menu can be clicked open and closed by clicking on the Accordion Title.

Similar to the show tab contents on hover for Mega Menu built using GenerateBlocks tabs…

I would like the accordion to close as soon as anyone hovers outside the Accordion Content container?

David

April 2, 2024 at 4:39 am

Hi there,

perhaps this:


<script>
  document.addEventListener('DOMContentLoaded', function () {
    var vjMenus = document.querySelectorAll('.vj-menu');

    function isMenuOpen(menu) {
      return menu.classList.contains('gb-accordion__item-open');
    }

    function handleMouseOut(event) {
      var menu = this;
      var relatedTarget = event.relatedTarget;

      if (!menu.contains(relatedTarget)) {
        var toggleButton = menu.querySelector('.gb-accordion__toggle');
        toggleButton.click();
        menu.removeEventListener('mouseout', handleMouseOut);
      }
    }

    function attachMouseOutListener(menu) {
      menu.addEventListener('mouseout', handleMouseOut);
    }

    function handleMouseOver() {
      var menu = this;
      if (isMenuOpen(menu)) {
        attachMouseOutListener(menu);
      }
    }

    vjMenus.forEach(function (menu) {
      menu.addEventListener('mouseover', handleMouseOver);
    });
  });
</script>

VJ
April 5, 2024 at 10:17 pm

Awesome thanks David. That works like a charm.

Can we also close the accordion when someone clicks on any links within the accordion?

i.e. since they have navigated to a section on the page, we no longer need to keep the menu open.

David

April 6, 2024 at 7:13 am

Hmmm…. try:


<script>
  document.addEventListener('DOMContentLoaded', function () {
    var vjMenus = document.querySelectorAll('.vj-menu');

    function isMenuOpen(menu) {
      return menu.classList.contains('gb-accordion__item-open');
    }

    function handleMouseOut(event) {
      var menu = this;
      var relatedTarget = event.relatedTarget;

      if (!menu.contains(relatedTarget)) {
        var toggleButton = menu.querySelector('.gb-accordion__toggle');
        toggleButton.click();
        menu.removeEventListener('mouseout', handleMouseOut);
      }
    }

    function attachMouseOutListener(menu) {
      menu.addEventListener('mouseout', handleMouseOut);
    }

    function handleMouseOver() {
      var menu = this;
      if (isMenuOpen(menu)) {
        attachMouseOutListener(menu);
      }
    }

    function handleClickInsideMenu(event) {
      var menu = event.currentTarget.closest('.vj-menu');
      var toggleButton = menu.querySelector('.gb-accordion__toggle');
      toggleButton.click();
    }

    vjMenus.forEach(function (menu) {
      menu.addEventListener('mouseover', handleMouseOver);
      menu.querySelectorAll('.vj-menu a').forEach(function(link) {
        link.addEventListener('click', handleClickInsideMenu);
      });
    });
  });
</script>

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Close Accordion