Elementor is a popular WordPress page builder that allows users to create stunning websites with ease.
Elementor Accordion
The Accordion is a helpful widget in Elementor that aids in organizing and displaying content in a collapsible fashion. The Elementor Accordion widget’s default setting is for all of the parts to be open. In some circumstances, though, you might wish to arrange the accordion such that every segment is closed by default. Using some straightforward code examples, we will examine how to accomplish it in this post.
Step 1: Add an Accordion widget in Elementor
First, you need to create a section in Elementor and add an Accordion widget to it. To do this, follow these steps:
- Open your WordPress dashboard and navigate to the page where you want to add the Accordion.
- Edit the page with Elementor.
- Search for the “Accordion” widget in the Elementor panel on the left-hand side.
- Drag and drop the Accordion widget into the desired section of your page.
Step 2: Disable the "Toggle" option
By default, the Accordion widget has a “Toggle” option that allows users to open and close the sections by clicking on them. To achieve the desired behavior of having all the sections closed by default, we need to disable this option. Here’s how you can do it:
- Click on the Accordion widget to open its settings panel on the left-hand side.
- Under the “Content” tab, look for the “Toggle” option.
- Toggle the “Toggle” option off to disable it.
Step 3: Add custom JavaScript code
Now that we have disabled the “Toggle” option, we need to add some custom JavaScript code to ensure that all the sections remain closed when the page loads. Follow these steps to add the code:
- Click on the section that contains the Accordion widget.
- In the Elementor settings panel on the left-hand side, switch to the “Advanced” tab.
- Find the “Custom CSS” field and click on the “Edit Custom CSS” link.
- Switch to the “Custom JavaScript” tab in the modal that appears.
- In the “Custom JavaScript” field, paste the following code:
<script>
jQuery(document).ready(function($){
$('.elementor-accordion-item').each(function() {
$(this).removeClass('elementor-active');
$(this).find('.elementor-accordion-content-wrapper').slideUp();
});
});
</script>
Step 4: Save and update the page
Finally, save your changes and update the page. Now, when you load the page, you will see that all the sections of the Accordion widget are closed by default. Users can still click on the sections to open them, but they won’t be able to see any content until they do so.
Conclusion
Setting the Elementor Accordion to have all the sections closed by default can be achieved by following these simple steps. By disabling the “Toggle” option and adding a small snippet of custom JavaScript code, you can control the initial state of the Accordion widget. This allows you to present your content in a neat and organized manner, providing users with the option to expand the sections they are interested in. Experiment with different settings and styles to create the perfect accordion experience for your website.
