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

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.

Add this at in your template/Page’s Page settings area in the Bricks editor:

<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.

Instant access to 390+ Bricks code tutorials with BricksLabs Pro

2 comments

Leave your comment