Source: https://divicake.com/blog/divi-accordion-module/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # How To Set The Divi Accordion Module Default State Open Or Closed By Divi Cake·4 April 2024·Updated 4 April 2024·3 min read For the Accordion module, there's no default option to control the state of all accordions at once. We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Adjusting the Default State of the Divi Accordion Module](https://divicake.com#adjusting-the-default-state-of-the-divi-accordion-module) - [Assign a CSS Class to the Accordion Module](https://divicake.com#assign-a-css-class-to-the-accordion-module) - [Incorporate the jQuery Code](https://divicake.com#incorporate-the-jquery-code) - [Conclusion:](https://divicake.com#conclusion) In this guide, we’ll explore how to automatically open or close Divi accordions when a webpage loads. For the Accordion, there’s no default option to control the state of all accordions at once. To address this, we’ll learn how to achieve it using a simple jQuery Snippet. Throughout this tutorial, we’ll demonstrate how to set the default state of [Divi](https://divicake.com/go/divi/) Accordion modules to either open or closed with the help of jQuery. ## Adjusting the Default State of the Divi Accordion Module It’s a bit tricky with the Divi accordion module compared to the Toggle module. Right now, there’s no direct option for adjusting this in the Accordion module settings. What makes it a bit frustrating is that the first item in the accordion is automatically open when you load the page. If only tweaking it were as straightforward as it is with the Toggle module! Read More: [How To Add Shape Dividers In Divi](https://divicake.com/blog/shape-dividers-in-divi/) ## Assign a CSS Class to the Accordion Module To start customizing the Accordion module, the first thing we need to do is assign it a custom CSS class. This class will help us specifically target this Accordion module later on when we’re using jQuery code. To do this, go to the settings of the Accordion module and find the Advanced tab. Inside this tab, look for the CSS ID & Classes option and toggle it open. Now, you’ll see a field labeled CSS Class. In this field, type in the custom class name dc-accordion. Once you’ve done this, the Accordion module will be ready for further customization using jQuery. To start customizing the Accordion module, the first thing we need to do is assign it a special class. Assign a CSS Class to the Accordion Module Read More: [Understanding & Adding Captcha to Your Divi Website: Step-by-Step Guide (2024)](https://divicake.com/blog/add-captcha-in-divi-website/) ## Incorporate the jQuery Code To make sure your [Divi](https://divicake.com/go/divi/) Accordion modules are initially closed on your website, the final step involves adding a small piece of jQuery code. This code will provide the functionality to automatically close the Accordion modules by default. It’s like giving your website a little instruction that says, “Hey, keep these Accordion sections closed when the page loads.” This step ensures a neat and tidy look for your website, with a clean and organized appearance right from the start. [Copy the JQuery Code from here](https://drive.google.com/file/d/1WOxgGyeva_Kufg9YcG2XJ0Pj8mIwwMhN/view?usp=drive_link) paste this code in your Divi>Theme Options>Integrations tab in the Add code to the < head > of your blog code area. This code will provide the functionality to automatically close the Accordion modules by default. Pasting the JQuery Code to the Divi Dashboard In the given code, there’s a variable called “setState” that’s initially set to “close” in our example. You have the option to modify this to “open” if you prefer. When “setState” is set to “close,” the code will automatically close all the accordion elements when the page loads. Conversely, if you set it to “open,” the code will open all the accordions as the page loads. Feel free to customize this variable based on your desired initial accordion state. Read More: [Beginner’s Guide to WordPress: Step-by-Step Tutorial (2024)](https://divicake.com/blog/wordpress-tutorial/) ## Conclusion: In conclusion, mastering the default state of [Divi](https://divicake.com/go/divi/) Accordion modules can greatly enhance the visual appeal and functionality of your website. Despite the absence of a direct option in the Accordion module settings, we’ve walked through a simple and effective solution using a jQuery snippet. By assigning a custom class to the Accordion module and incorporating the provided jQuery code, you gain the power to control whether the accordions start off open or closed when visitors land on your webpage. The flexibility to set the initial state as “close” or “open” gives you the freedom to tailor the user experience to match your design preferences. Don’t forget to seamlessly integrate the jQuery code into your [Divi theme](https://divicake.com/blog/divi-theme-review/) by pasting it into the designated area under Divi > Theme Options > Integrations tab. This small addition ensures that your accordions behave just the way you envision, providing a clean and organized appearance from the moment your website loads. Experiment with different settings, and enjoy the newfound control over your Divi Accordion modules, contributing to a more polished and user-friendly website. Read More: [9 Top 404 Error Page Layouts for Divi in 2024](https://divicake.com/blog/divi-404-page-layouts/) About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tips & Tricks [ Divi Condition Options Explained Tips & Tricks6 min read ### Divi Condition Options Explained How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state. 3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/) [ Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Tips & Tricks6 min read ### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones. 26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/) [ Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Reviews7 min read ### Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Divi Pro pricing bundles AI, hosting, cloud and support into one plan. See what each add-on costs alone and the point where the bundle stops paying off. 25 February 2026](https://divicake.com/blog/divi-pro-pricing-bundle-vs-addons/)