Elementor is a popular page builder plugin for WordPress that allows users to create complex layouts with ease. One of the widgets included in Elementor is the Accordion widget, which displays content in a collapsible and expandable format. By default, the accordion widget is set to open when clicked, but in some cases, you may want to keep it closed. In this article, we'll go over the code you need to keep the Elementor Accordion widget closed. Step 1: Locate the Elementor Accordion widget The first step is to locate the Elementor Accordion widget you want to keep closed. In your WordPress dashboard, go to the page or post where the Accordion widget is located and open it in the Elementor editor. Step 2: Add custom CSS class to the Accordion widget To keep the Accordion widget closed, we need to add a custom CSS class to the widget. To do this, click on the Accordion widget, and in the Advanced tab, scroll down to the CSS Classes option. In the CSS Classes field, enter a custom class name such as "closed-accordion." Step 3: Add custom JavaScript to keep the Accordion widget closed Now that we have added a custom class to the Accordion widget, we need to add some custom JavaScript to keep it closed. In the WordPress dashboard, go to Appearance > Customize and click on Additional CSS. In the CSS editor, add the following JavaScript code:
<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>
This code adds the "elementor-accordion-icon-closed" and "elementor-hidden" classes to the Accordion widget when the "closed-accordion" class is present. The "elementor-accordion-icon-closed" class changes the accordion icon to a closed state, and the "elementor-hidden" class hides the content. Step 4: Save and publish Once you have added the custom CSS class and JavaScript code, click on Publish to save the changes. Now, when users click on the Accordion widget, it will remain closed. Conclusion: The Elementor Accordion widget is a great way to display content in a collapsible and expandable format. However, in some cases, you may want to keep it closed. By following these simple steps and adding a custom CSS class and JavaScript code, you can easily keep the Accordion widget closed in Elementor.