Menu
cipdesign.net
  • facebook
  • instagram
  • Home
  • Blog
    • Graphic Design
    • Digital Marketing
    • Webdesign
    • WebDeveloper
  • FREE*
    • Free WordPress Themes
    • Free WordPress Plugins
    • Free Digital Marketing
    • Free Graphic Design
  • Portofolio
    • Graphic Design
    • Web Design
  • Get in Touch
Previous What is WooCommerce?
Next Creating a Blog Post with Classic Editor
  • Webdesign
  • WebDeveloper
  • WordPress

Set Elementor Accordion Closed by Default along

Share :

Set Elementor Accordion Closed by Default along. The first item of the accordion is set to open and Elementor offers no default setting to make it closed. For some users, it is a bit annoying as the main purpose of adding accordion is to hide information and requires user to display the information.

1. Create a Duplicate Accordion Item to Make Elementor Accordion Closed by Default (Using CSS Code)

  • Step 1: Duplicate the very first accordion item
  • Step 2: Copy of the below-provided CSS code
  • Step 3: Navigate to the advanced settings of the accordion widget & paste of the above CSS codes inside the Custom CSS option.
Advertisements

.elementor-accordion .elementor-accordion-item:first-of-type {
display: none;}
.elementor-accordion {
border-top: 1px solid;
}

Advertisements

Once you’re done adding the CSS code, Update the page & see the magic. The very first accordion item will be hidden.

2. An Widget that helps you Keep Elementor Accordion Closed by Default.
You can use the following JavaScript to do so.

  • Step 1: Copy the below-provided Javascript code…
  • Step 2: Just above your accordion widget, place an “HTML Widget” from the elements panel & paste the above-provided Javascript code inside the HTML 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>

www.kuldeeprathore.com

Explore the Editor
Download FREE Elementor
Advertisements
ElementorFree WordPress PluginsWebdesignWebDeveloper
© Cipdesign.net 2023 / All rights reserved.
  • Terms and Conditions
  • Privacy