Making Bricks Nestable Accordion’s First Item Open on Desktop and Closed on Mobile

Updated on 5 Nov 2024

In the Bricks Facebook group, a user asks:

How can I make the nestable accordion first entry open on desktop but closed on mobile?

Here’s a way to do it using a bit of custom JavaScript.

First select your Accordion (Nestable) element in the builder and toggle “Expand first item” on.

Edit your Page/Template with Bricks.

Click on Settings (gear icon) → PAGE SETTINGS → CUSTOM CODE. Add this under Body (footer) scripts:

<script>

document.addEventListener('DOMContentLoaded', function() {
    // Specifically for mobile, check if the first item is open and close it
    if (window.innerWidth <= 768) { // Adjust as needed for your mobile breakpoint
        const firstContent = document.querySelector('#brxe-nmcaww .brxe-block.listening:first-child .accordion-content-wrapper');
        if (firstContent) {
            firstContent.style.display = 'none';
        }
    }
});

</script>

Replace #brxe-nmcaww with the HTML selector of your Accordion (Nestable) element.

Note: This only works after a page refresh 768px and below. You can’t see it take effect if you are resizing the window down from desktop to mobile.

Update 1: If you are using Frames Accordion add this code instead:

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Function to handle mobile accordion state
    const handleMobileAccordion = () => {
        if (window.innerWidth <= 768) {
            const firstAccordionItem = document.querySelector('.fr-faq-accordion-alpha .fr-accordion__item:first-child');
            
            if (firstAccordionItem) {
                const header = firstAccordionItem.querySelector('.fr-accordion__header');
                const body = firstAccordionItem.querySelector('.fr-accordion__body');
                const icon = firstAccordionItem.querySelector('.fr-accordion__icon');
                
                // Remove expanded state
                header.setAttribute('aria-expanded', 'false');
                
                // Reset body height to 0
                body.style.height = '0px';
                
                // Remove flipped class from icon if present
                if (icon) {
                    icon.classList.remove('fr-accordion__icon--flipped');
                }
            }
        }
    };

    // Run on initial load
    handleMobileAccordion();

    // Run on resize
    window.addEventListener('resize', handleMobileAccordion);
});
</script>

For multiple Frames accordions on the same page add this instead:

document.addEventListener('DOMContentLoaded', function() {
    // Function to handle mobile accordion state
    const handleMobileAccordions = () => {
        if (window.innerWidth <= 768) {
            // Get all accordions on the page
            const accordions = document.querySelectorAll('[data-fr-accordion-options]');
            
            accordions.forEach(accordion => {
                // Parse the accordion options
                const options = JSON.parse(accordion.dataset.frAccordionOptions || '{}');
                
                // Only process accordions that have firstItemOpened set to true
                if (options.firstItemOpened) {
                    const firstAccordionItem = accordion.querySelector('.fr-accordion__item:first-child');
                    
                    if (firstAccordionItem) {
                        const header = firstAccordionItem.querySelector('.fr-accordion__header');
                        const body = firstAccordionItem.querySelector('.fr-accordion__body');
                        const icon = firstAccordionItem.querySelector('.fr-accordion__icon');
                        
                        // Remove expanded state
                        header.setAttribute('aria-expanded', 'false');
                        
                        // Reset body height to 0
                        body.style.height = '0px';
                        
                        // Remove flipped class from icon if present
                        if (icon) {
                            icon.classList.remove('fr-accordion__icon--flipped');
                        }
                    }
                }
            });
        }
    };

    // Run on initial load
    handleMobileAccordions();

    // Run on resize with debounce
    let resizeTimer;
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(handleMobileAccordions, 250);
    });
});