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.
Related Post: Adding PHP to the Divi Theme
2) Save your inner accordion module to the Divi Library.
[dbc_nested_layout id="123"]5) View the page on the front-end and you should now see your nested accordion modules, like so:
0 Comments