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:
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!
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?