Make Divi Accordions Closed by Default

Divi by ElegantThemes is a great multipurpose theme. Without some tweaks and customization, you can make your desirable website in a few moments using Divi.

If you have used the Accordion module in Divi, the first accordion is always open by default. To keep it close by default you can use a small JavaScript snippet. There is no need for an extra free or paid plugin.

Before: Divi Accordion Open by Default
Before: Divi Accordion Open by Default

To do so, add the following JavaScript/jQuery codes via Divi > Theme Options > Integrations > Add code the the <head> of your blog

<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>
After: Add JavaScript to Close by Default

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.