Put One Divi Accordion Module inside Another


Boost Your Site and Save 20% this Weekend

Join 50,000 users and build a better site with 20% off all Divi Booster plugins.

Discount applied at checkout. Offer ends Monday!








If you need to embed one Divi module inside another, there are several plugins out there that may help, such as Simple Divi Shortcodes (free), Shortcodes for Divi (also free), or Divi Shortcodes (premium). They all work in more or less the same way – you save your inner module to the Divi library and these plugins generate a shortcode for that module which you can then insert in the text area of one your outer module.

In theory, these could be used to display one (inner) Divi accordion module inside another (outer) one. However (in the case of the free plugins, at least – I haven't had a chance to test Divi Shortcodes yet), this does not work out as expected. In particular, the title of the outer accordion toggle ends up being overridden by the title of the last inner toggle. The toggle open icons are also missing from the inner accordion and there is some strangeness when the outer toggles are opened / closed which see the inner toggles start to animate too.

Here's an alternative to approach to embedding one accordion in another.

1) Add this PHP code to your site:

add_filter('the_content', 'dbc_process_nested_layouts', 9);

function dbc_process_nested_layouts($content) {
    $content = preg_replace_callback('/\[dbc_nested_layout id=[”"]?(\d*)["″]?\]/', 'dbc_nested_layouts_callback', $content);
    return $content;

function dbc_nested_layouts_callback($match) {
    if (empty($match[1])) return '';
    $id = absint($match[1]);
    $global = function_exists('et_pb_load_global_module')?et_pb_load_global_module($id):'';
    return do_shortcode($global);

add_action('wp_head', 'dbc_nested_accordion_css');

function dbc_nested_accordion_css() {
    echo <<<'END'
    .et_pb_toggle_open .et_pb_toggle_close .et_pb_toggle_title:before{
        display: block !important;
        content: "\E050" !important;
    .et_pb_accordion_toggling .et_pb_toggle .et_pb_toggle_close .et_pb_toggle_content { 
        display: none !important; 

If you're using a child theme, you can put it in your child theme's functions.php file. Otherwise, the easiest way is probably to add it with a plugin such as Code Snippets.

2) Save your inner accordion module to the Divi Library.

3) Add your outer accordion to your page.
4) Place the following shortcode in one of the toggles of you outer accordion:
[dbc_nested_layout id="123"]
Where 123 is the post ID of your inner accordion.

5) View the page on the front-end and you should now see your nested accordion modules, like so:

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin


  1. Please ignore my previous comment from yesterday; I have since found a bit of script was was interfering and corrected that. Apologies for any waste of your time and thanks for providing this tip.

    • No apologies necessary, Graham. I’m glad you got it working and I appreciate you letting me know. Thanks!

  2. Seems this only works for the first nested accordion on a page. I have two top level accordions on a page, both of which need nested content on one of their items. The one in the first accordion works fine, the second just shows [dbc_nested_layout id="291"] rather than the inner accordion.

    See example at the link below; the inner accordion at 'Sales Methods – Pro & Cons" in the "Selling a property" accordion section works. The one at "Stamp Duty" in the "Buying a Property" one doesn't.

    Any help for making both work?


Submit a Comment

Your email address will not be published. Required fields are marked *