Put One Divi Accordion Module inside Another

|

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'
    <style>
    .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; 
    }
    </style>
END;
}

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

0 Comments

Submit a Comment

Your email address will not be published.