If you need to embed one Divi module inside another, there are several free plugins out there that may help, such as Simple Divi Shortcodes, Shortcodes for Divi, or Divi Library Shortcodes. 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 your outer module.
In theory, these could be used to display one (inner) Divi accordion module inside another (outer) one. However this does not work as expected, due to several quirks of the accordion module which are not factored in by the plugins.
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"]Where 123 is the post ID of your inner accordion.
Note, if you had previously added a shortcode from one of the plugins mentioned above, replace it with the "dbc_nested_layout" one.
5) View the page on the front-end and you should now see your nested accordion modules, like so:
Notes
- If you are adding the PHP code using the WP Code plugin, set the snippet's insertion location to "Run Everywhere". The option to set it to "Site Wide Header", for example, won't work as it doesn't allow the PHP code to run at the correct time during the page generation process.
Hello, I have followed these instructions and even when I place the PHP, the first headline is replaced by the last item int eh nested accordion and the controls on the nested accordion disappear (as you mentioned was an issue for you without the code).
Hey Audra, sorry to hear it isn't working for you. It looks to me like the PHP code probably isn't being run at all. I'd suggest first checking that the PHP code is where you'd expect it to be and that there are no obvious errors. Assuming that it looks okay, are you able to let me know where you've added it? It should be in, for example, the child theme functions.php file or a plugin for adding PHP (such as the Code Snippets one I mention). Thanks!
Thanks for the reply, Dan.
I had added the PHP using the Code Snippets plugin. There is an error that showed up when the code was placed: "Special characters must be escaped : [ < ] . This is at line 18, in case that is part of the issue.
Thank you!
Hey Audra, thanks for the extra info. This error suggests to me that the code has been placed in a box intended for HTML / CSS, rather than PHP. I get this exact error if I place the code in the Divi Theme Options Integrations tab (whose boxes are intended to take HTML, rather than PHP code), and in the Code Snippets plugin I get a similar (though slightly differently worded) error if I place it in the CSS tab (available in Code Snippets Pro). In Code Snippets (free or Pro), make sure you place the code in a "Functions |PHP|" tab at "WP Dashboard > Snippets > Add New". If that doesn't help, is there any chance you'd be able to send through a screenshot of your code, showing where it is added? If you send a message via the contact form, and mark it as "Bug Report", you'll get an auto-response to which you can attach the screenshot. Thanks!
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?