Download The Child-Theme

Nestable Accordion in Bricks Builder

Table of Contents


Here you can see a full working example of the Accordion. The basic version in the step-by-step Guide doesn’t include those arrows, but it’s described below how you can achieve that with a few lines of CSS.

Accordion Header

Accordion Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Video Walkthrough

Step-by-step guide

The Step-by-Step Instructions always assume that you have installed the child-theme. If not you will have to manually enqueue the script/styles.

Accordion Wrapper

Accordion now supports multiple instances. That means, that you can have multiple Accordions with different settings (all opened, only one opened) in one page. You can now also mix them up. One Wrapper supports multiple opened, the other only one opened at the same time, that’s why we need first a Wrapper Element:

Assign an ID to that Wrapper-Element!

Accordion Header & Content

For every Accordion Element inside that Wrapper you’ll need to create one header and one content element, which is basically nothing else than a container element. You can place any Element inside that Container, whatever you prefer!

There is at least one CSS-Class necessary to make it work: .wcd_accordion_header which you have to assign to your accordion header-element (container-wrapper). You could also assign wcd_accordion_active to any header-element. Those elements are opened by default then.

Make sure to assign at least .wcd_accordion_header to the corresponding container-element (screenshot below).

Enqueue & Initialize the Accordion

Assuming that you are using the child-theme, you can follow the Instruction below. If not you have to copy the full source code and initialize the accordion then.

add_action('wp_footer', function() {


const demoAccordion = new WCD_accordion({
    target: '#newAccordion',
    multiple: false,
  	duration: '0.4s',

}, 99);


Options & Parameter to adapt

As you maybe saw in the Code above, there are a few options you can adapt to change the behaviour of the Mega-Menu:
Option Name Type Default Value Note

ID of your Accordion-Wrapper. Include the hash (#) sign!


Whether only one accordion-element can be opened at the same time or not!


The duration of the open/close effect. Example: '0.4s'

Example of a completed Options Object:

const options = {
    menu: '#newAccordion',
    multiple: false,
    duration: '0.4s',

Full Source Code

This Section get's updated automatically and always shows the latest Version of the source-code. You can copy & paste that code if you haven't installed the child-theme.