Accordion JS - click outside to close

Attributes
1

Hey guys, just wondered if there’s a way to close the accordion if you click outside of the accordion group element?

2

Hey @yogdog! Something like this can achieve what you are looking for

<script>
  document.addEventListener('click', function (event) {
    // Select your accordions with the class
    const accordion = document.querySelector('.faq_component');
    const clickedElement = event.target;

    // Check if the clicked element is outside of the accordion
    if (!accordion.contains(clickedElement)) {
      // Close all accordion items by hiding their content
      const accordionContents = document.querySelectorAll('.faq_item_content');
      accordionContents.forEach(function (content) {
        content.style.display = 'none';
        content.style.maxHeight = '0px';
      });
    }
  });

  // Add click event listeners to the accordion trigger buttons to toggle their content
  const accordionTriggers = document.querySelectorAll("[fs-accordion-element='trigger']");
  accordionTriggers.forEach(function (trigger) {
    trigger.addEventListener('click', function () {
      const content = trigger.nextElementSibling;
      content.style.display = content.style.display === 'none' ? 'block' : 'none';
      content.style.maxHeight = content.style.maxHeight === '0px' ? '1000px' : '0px';
    });
  });
</script>
1 Like
3

Thanks Luis! Really appreciate your help and speedy response!

The first part works well. My accordion elements are styled with the default active combo class (is-active-accordion), so I needed to add a line the following line in to reset the arrow etc:

$(".is-active-accordion").removeClass("is-active-accordion");

The second part of the code doesn’t seem to be doing anything for me - don’t know if that’s because I have the accordion setup to only allow one to be open?

[fs-accordion-single=true]

My main issue now is that I can click outside of the accordion (anywhere else on the page) and it closes the accordion/nav as I wanted it to, however when I click back on the trigger for the accordion item that was previously open, nothing happens, but it will open on a second click and function as normal.

Interestingly, after I close the accordion by click outside of it, if I then click on the other accordion items (not the one that was previously open), everything works perfectly.

Perhaps it’s some conflict with the attributes script? The last open accordion item might not be “closed” from the perspective of the FS script until it gets that second click?

For clarity, this is my current page code in the before /body tag section:

<script>
document.addEventListener('click', function (event) {
    	// Select your accordions with the class
    	const accordion = document.querySelector('.fs_accordion-2_component');
    	const clickedElement = event.target;

    	// Check if the clicked element is outside of the accordion
    	if (!accordion.contains(clickedElement)) {
      	// Close all accordion items by hiding their content
      	const accordionContents = document.querySelectorAll('.fs_accordion-2_content');
      	accordionContents.forEach(function (content) {
        	content.style.display = 'none';
        	content.style.maxHeight = '0px';
      	});    
      
      	$(".is-active-accordion").removeClass("is-active-accordion"); 
    	}
  	});
</script>

Ignore my class name at the moment - the .fs_accordion-2_content is because I have previously added the FS Accordion to the site and must have forgotten to remove unused classes.

What do you think my options are at this point? Really appreciate your help - you guys F-in rock!

4

Hey @yogdog! One thing we can try is simulating a click on the open accordion’s close element before changing its style. I am afraid the Accodrion Attributes API solution has not been developed yet.

5

Hey @Support-Luis ! I tried simulating clicks but couldn’t get it to work. I did have some success with the FS Mirror Click.

I added another div inside each .fs_accordion_body called fs_accordion_close-trigger, set it’s height to 100vh and background to transparent.

Bit of a hacky solution, but it does seem to work. Only issue is that it seems to make my overflow:auto for the scroll not work (even though I’ve hidden the close-trigger on tablet down.

If you or anyone has any suggestions for getting a simulated click to work with the above code that would be greatly appreciated!

6

UPDATE - I got the overflow scroll to work, just need to set some min/max heights to my nav list element.

7

Great to hear! Thanks @yogdog for keeping us posted :muscle:

1 Like