This tutorial will only require you to copy and paste a simple jQuery/Javascript code and a CSS Code. Don’t you worry if you’re not familiar with this, with this tutorial I’ve made, it’s pretty simple to follow.
Let’s get to it!
(In case you’re looking for a tutorial on how to have all the accordion tabs closed by default, click here.)
Sample
Accordion 1
Accordion 2
Video Tutorial:
Tutorial
Step 1: Find Where To Add jQuery Code
If you’re not familiar with jQuery, don’t you worry! It’s pretty simple. But, first, let’s find out where to add this code. Head to your WordPress dashboard > Divi (on the left) > Theme Options > Integration > Add code to the < head > of your blog
Step 2: Add jQuery Code
Now that you’ve found where to add it, here’s the code:
<script>
jQuery(function($){
$('.et_pb_toggle_title').click(function(){
var $toggle = $(this).closest('.et_pb_toggle');
if (!$toggle.hasClass('et_pb_accordion_toggling')) {
var $accordion = $toggle.closest('.et_pb_accordion');
if ($toggle.hasClass('et_pb_toggle_open')) {
$accordion.addClass('et_pb_accordion_toggling');
$toggle.find('.et_pb_toggle_content').slideToggle(700, function() {
$toggle.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');
});
}
setTimeout(function(){
$accordion.removeClass('et_pb_accordion_toggling');
}, 750);
}
});
});
</script>
Step 3: Find Where To Add CSS Code To Have “Close” Icon On Accordion Tab
Let’s go to the Theme Customizer to add the simple CSS via WordPress dashboard > Divi > Theme Customizer > Additional CSS
Step 4: Add CSS Code & Publish
Now, we can add this code:
.et_pb_toggle_open .et_pb_toggle_title:before {
display: block !important;
content: "\e04f";
}And then, make sure to click the Publish button!
If you have any questions or inquiries about it, please do not hesitate to ask, and I will be happy to help!
If you have watched the video tutorial, and it has helped, please do Like, Comment & Subscribe! Thanks!