Auto Collapsed all tabs by defualt similar to accordion

I’m working on a tab layout similar to the attached image.

The tabs should be closed by default and only open when clicked. It should close again when the same item is clicked, similar to an accordion element.

Using the “Nested Tab Element” for layout creation does not provide an option to close all tabs automatically and also close an open item when clicking on the title.

In the accordion element, bricks have the above-mentioned functionality. The accordion items are vertically stacked. I would like the titles to be horizontal and the content to take up the full width.

I have attached an image to explain the layout and its functionality.

I have a few questions.
-How to auto-close all the tab items by default and also close the open tab by clicking on the title/image?
-How to set the accordion titles horizontally and load the content in full width below the titles?

Does anyone know how we can make a responsive and functional layout similar to the image I attached?

Thank you,

I’ve done this.

Method one - closed by default (with bricks):

  1. Assign a class to your tabs and the pane
  2. remove the class on load with bricks interaction
    This will prevent the tabs from being open on page load.

Method two - closed by default (with jQuery):

  1. These lines will do it
jQuery(document).ready(function($) {

        var tabTitle = '.mly-product-tabs__title';
        var tabPane = '.mly-product-tabs__pane';

        $(tabTitle + ', ' + tabPane).removeClass('brx-open');

Closed by default and close on click
Now that you want the tabs to close again on click i recommend to use the below only so you don’t mix’n’match interactions in bricks with code. Can be difficult to maintain and remember.

jQuery(document).ready(function($) {
    var hadClassInitially = false,
        tabTitle = '.mly-product-tabs__title',
        tabPane = '.mly-product-tabs__pane';

        $(tabTitle + ', ' + tabPane).removeClass('brx-open');

    // Capture the initial state using mousedown
    $(document).on('mousedown', tabTitle, function() {
        hadClassInitially = $(this).hasClass('brx-open');

    // Perform the action based on the captured state using click
    $(document).on('click', tabTitle, function() {
        if (hadClassInitially) {
            // Remove the 'brx-open' class from both 'tab-title' and 'tab-pane'
            $(tabTitle + ', ' + tabPane).removeClass('brx-open');


Hi Keviin,

This is awesome, thanks for checking this out.

I have also figured out how to do it with Bricks interaction.

Here is how I did it with Bricks interaction.

Here are the interactions details:
-Hide all the “Tab content” sections when the page loads, using the interaction on the heading.

-Toggle the “show” and “hide” classes on the “Tab Title/Image” when clicked, using the “toggle attribute” interaction. Remove the “show” class from other content tabs by using the “remove attribute” interaction.


.hide {
display: none!important;
.show {
display: block!important;

Here is how it works on frontend.
Recording 2023-10-06 201926 00_00_00-00_00_30~1