Ensuring Only One Accordion Panel Remains Open at a Time in the Dawn Theme Footer

Store Design
, , , , , , ,
1

I have custom-coded an accordion section in the footer of the Dawn theme for mobile view. The goal is to ensure that when one accordion panel opens, any previously opened panel closes automatically. In other words, only one accordion panel should remain open at a time.

2

Hey @Sivadarshan Could you please share the store URL? This will allow me to inspect it and provide you with a more tailored solution.

3

website: https://rugd-in.myshopify.com/

password: rugged

4

website: https://rugd-in.myshopify.com/

password: rugged

5

@Sivadarshan Please replace your Accordia JS code with the code provided below.

window.addEventListener('DOMContentLoaded', () => {
  const headings = document.querySelectorAll('.grid .footer-block__heading');

  // Handle collapse logic
  const handleCollapse = (heading) => {
    const content = heading.nextElementSibling;

    // Close all other sections
    headings.forEach((otherHeading) => {
      if (otherHeading !== heading && !otherHeading.classList.contains('block-collapsed')) {
        const otherContent = otherHeading.nextElementSibling;
        otherHeading.classList.add('block-collapsed');
        otherHeading.setAttribute('aria-expanded', 'false');
        otherContent.style.display = 'none';
      }
    });

    // Toggle the clicked section
    if (heading.classList.contains('block-collapsed')) {
      heading.classList.remove('block-collapsed');
      heading.setAttribute('aria-expanded', 'true');
      content.style.display = 'block';
    } else {
      heading.classList.add('block-collapsed');
      heading.setAttribute('aria-expanded', 'false');
      content.style.display = 'none';
    }
  };

  headings.forEach((heading, index) => {
    heading.classList.add('block-collapsed');
    heading.setAttribute('role', 'button');
    heading.setAttribute('aria-expanded', 'false');
    heading.setAttribute('tabindex', '0');

    const content = heading.nextElementSibling;
    content.setAttribute('id', `footer-block-index-${index}`);
    heading.setAttribute('aria-controls', `footer-block-index-${index}`);

    // Add event listeners for click and keydown (Enter, Space)
    heading.addEventListener('click', () => {
      handleCollapse(heading);
    });

    heading.addEventListener('keydown', (event) => {
      if (event.key === 'Enter' || event.key === ' ') {
        handleCollapse(heading);
      }
    });
  });
});

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the Accepted Solution.
Best regards
K.K

1 Like
6

Thanks @Sivadarshan

7

But it is applying for all the views like mobile, desktop and tablet view, but my need is only for mobile view

8

@Sivadarshan Please try this code; it only works in mobile view.

window.addEventListener('DOMContentLoaded', () => {
  const headings = document.querySelectorAll('.grid .footer-block__heading');
  
  // Check screen size
  const isMobile = () => window.innerWidth < 749;

  const handleCollapse = (heading) => {
    const content = heading.nextElementSibling;

    // Close all other sections on mobile
    if (isMobile()) {
      headings.forEach((otherHeading) => {
        if (otherHeading !== heading && !otherHeading.classList.contains('block-collapsed')) {
          const otherContent = otherHeading.nextElementSibling;
          otherHeading.classList.add('block-collapsed');
          otherHeading.setAttribute('aria-expanded', 'false');
          otherContent.style.display = 'none';
        }
      });
    }

    // Toggle the clicked section
    if (heading.classList.contains('block-collapsed')) {
      heading.classList.remove('block-collapsed');
      heading.setAttribute('aria-expanded', 'true');
      content.style.display = 'block';
    } else {
      heading.classList.add('block-collapsed');
      heading.setAttribute('aria-expanded', 'false');
      content.style.display = 'none';
    }
  };

  const applyCollapseBehavior = () => {
    headings.forEach((heading, index) => {
      const content = heading.nextElementSibling;

      if (isMobile()) {
        // Apply collapse behavior for mobile
        heading.classList.add('block-collapsed');
        heading.setAttribute('aria-expanded', 'false');
        content.style.display = 'none';
      } else {
        // Ensure content is visible on larger screens
        heading.classList.remove('block-collapsed');
        heading.setAttribute('aria-expanded', 'true');
        content.style.display = 'block';
      }
    });
  };

  // Set initial collapse behavior based on screen size
  applyCollapseBehavior();

  // Add event listeners for click and keydown (Enter, Space)
  headings.forEach((heading) => {
    heading.setAttribute('role', 'button');
    heading.setAttribute('tabindex', '0');

    heading.addEventListener('click', () => {
      if (isMobile()) {
        handleCollapse(heading);
      }
    });

    heading.addEventListener('keydown', (event) => {
      if ((event.key === 'Enter' || event.key === ' ') && isMobile()) {
        handleCollapse(heading);
      }
    });
  });

  // Reapply behavior on window resize
  window.addEventListener('resize', applyCollapseBehavior);
});

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the Accepted Solution.
Best regards
K.K

1 Like