Skip to content

Instantly share code, notes, and snippets.

@cesgarma

cesgarma/code.js

Created February 16, 2021 23:16
Show Gist options
  • Save cesgarma/dc4680c49e6c652eb2dfdaa21105596a to your computer and use it in GitHub Desktop.
Save cesgarma/dc4680c49e6c652eb2dfdaa21105596a to your computer and use it in GitHub Desktop.
Download ZIP
Set the Divi Accordion module as closed by default. Also adds a close button when an accordion section is opened. Add the code to your <head> for all website or on the individual page within a CODE module. Also add the CSS to add the Close button.
Raw
code.js
<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>
<script>
jQuery(function($){
$('.et_pb_accordion .et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
$('.et_pb_accordion .et_pb_toggle').click(function() {
$this = $(this);
setTimeout(function(){
$this.closest('.et_pb_accordion').removeClass('et_pb_accordion_toggling');
},700);
});
});
</script>
Raw
style.css
.et_pb_toggle_open .et_pb_toggle_title:before {
display: block !important;
content: "\e04f";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment