If you don’t like the way the Divi Accordion opens the first item by default, this code is the the solution. We also add a sprinkling of style! This tutorial will overcome this problem with a few lines of jQuery and CSS. If you don’t know where to put the code check out this tutorial. However, in this scenario a couple of on page code modules would be the best choice so that is what we will be doing today!

Divi Default Accordion

Divi Works Coded and Styled Accordion

IMPORTANT – You must add class name dw-accordion to your accordion module under the Advanced tab.

Firstly, with this method we are removing the open class (“et_pb_toggle_open”) and replacing it with the closed class (“et_pb_toggle_close”)

We then change the toggle functionality to make sure the items open and close independently or close when others are opened.

The following code should be added to a code module to ensure it runs on this page only. If you’re using an external JS file then remove the script tags.

<script>
jQuery(document).ready(function($) {
//Stop first accordion opening by default
$(".dw-accordion.et_pb_accordion .et_pb_toggle_open")
.addClass("et_pb_toggle_close")
.removeClass("et_pb_toggle_open");

$(".dw-accordion.et_pb_accordion .et_pb_toggle").click(function() {
$this = $(this);
setTimeout(function() {
$this.closest(".dw-accordion.et_pb_accordion").removeClass("et_pb_accordion_toggling");
}, 700);
});

//Allows closable accordions
$(".dw-accordion .et_pb_toggle_title").click(function() {
var $dw_toggle = $(this).closest(".et_pb_toggle");
if (!$dw_toggle.hasClass("et_pb_accordion_toggling")) {
var $accordion = $dw_toggle.closest(".et_pb_accordion");
if ($dw_toggle.hasClass("et_pb_toggle_open")) {
$accordion.addClass("et_pb_accordion_toggling");
$dw_toggle.find(".et_pb_toggle_content").slideToggle(700, function() {
$dw_toggle
.removeClass("et_pb_toggle_open")
.addClass("et_pb_toggle_close");
});
}
setTimeout(function() {
$accordion.removeClass("et_pb_accordion_toggling");
}, 750);
}
});
}); 
</script>

We can now style the accordion with different open and close icons. move the icons over to the left and add a background to the title. The rest of the styling is done within the module.

The following CSS code should be added to a code module to ensure it runs on this page only. If you’re using an external CSS file then remove the style tags.

<style>
.dw-accordion .et_pb_toggle_title:before {
position: absolute;
top: 50%;
left: -32px !important;
margin-top: -0.5em;
color: #fff;
color: #2b87da;
font-size: 24px;
font-weight: bold;
content: "\3b";
width: 24px;
cursor: pointer;
}

.dw-accordion .et_pb_toggle_open .et_pb_toggle_title:before {
display: block !important;
content: "\3a";
}

.dw-accordion .et_pb_toggle h5.et_pb_toggle_title {
background: #2b87da;
color: #ffffff;
font-size: 24px;
padding: 20px;
font-weight: bold;
margin-left: 40px;
}
</style>

If you’re wondering where to get the codes for the icons e.g content: “\3a”;

You can find them all here:

Scroll down to the section “Complete List Of Class Names” and inspect the icon with Google Chrome inspector. The code will be shown in the :before CSS class.

That’s all folks. Job done!