Solvedelementor Accordion - setting for all closed at start

Description

When Accordion is first displayed at page load, the first element is always open - would like a setting so all can be closed when page loads.

arielk commented (and closed the issue) "For this option please use Toggle widget instead of Accordion"

Unfortunately, Toggle doesn't work the same as Accordion ... elements have to be closed manually. In Accordion, there is only ever one open at a time - which is the behavior I want - so Toggle isn't a substitute.

Where there is a longish list (e.g. and FAQ), it's better for the visitor to see all the list headings before chosing ... it doesn't make sense to have the first item open, as it probably isn't appropriate to the visitor.

Steps to reproduce

Environment

58 Answers

βœ”οΈAccepted Answer

Yeah not seeing a fix in 1.8.x but here's some code you should be able to copy/paste without modding. The delay is there so that it executes after the accordion 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>

Other Answers:

+1 for this feature request.

Odd it's not closed by default. Kinda defeats the purpose of an accordion.

Thanks for the code snippet ... but I don't do code/programming (have never mastered it) ... which is why I use plugins like Elementor.

Agree with enviedbymost's comment ... other Accordions I've used have been closed to start with.

Please use the Toggle widget instead of the Accordion, It’s a similar widget but all items closed by default

Source https://wordpress.org/support/topic/close-first-accordion-item/

I have found a workarround:
Add a HTML code element to the page and paste this code:

It will close the first element after loading the page. It's ugly but it works.
source: https://voidcoders.com/elementor-accordion-closed-by-default/

Related Issues:

27
elementor Accordion - setting for all closed at start
Yeah not seeing a fix in 1.8.x but here's some code you should be able to copy/paste without modding...
19
elementor πŸ“£ Elementor v3.1 Beta 4 Release πŸ“£
As most of the users has been hungry for performance and custom breakpoint improvement ...
15
elementor data-tab link anchor to tabs
Here is my function as I could not wait :) For anyone who needs it :) Hey ...
15
elementor Add Filters and Hooks to Search Form Widget
@pako69 If you need to force Elementor's search to only use a specific post type lets say product fo...
14
elementor Popup - Close when you click on a button
@JoeDarko Currently this feature is not supported but we will look into it in the future if we see a...
14
elementor Improve performance: Reduce DOM elements
If you have concrete suggestions for reducing the number of DOM elements - we are open to hearing it...
13
elementor How to hide some Elementor Pro widgets from the frontend editor?
@norewp - thank you The following is sample code for removing everything (for now > I suppose in the...
12
elementor Include custom templates in Elementor template library (Not My template)
@dinhtungdu Sure feel free to use this idea! If you want Prerequisites I have searched for similar f...
12
elementor Triggering a popup by using a class or custom JS code
@bkjproductions (and for anyone else looking for a JS only solution) you can use: In the example abo...
9
elementor "Edit with Elementor" sub menu item in admin bar not showing on WordPress 5.6
This works for me.. add to your site CSS: #wp-admin-bar-elementor_edit_page:hover > div { display: b...
9
elementor Elementor 1.9 - Beta Release (RC3 Updated)
v1.9 Beta Version RC3 We just released a new beta version please update your version to v1.9.0 RC3 ...
8
elementor My templates -> Display Conditions: support polylang for localisation
@ziogaschr Elementor can't guess which multilingual 3rd party plugin you are using and we don't want...
8
elementor ACF relationship field as Posts source
This was such a pain in the ass Thank you for finally solving this I'm confused as to why this isn't...
6
elementor Elementor v2.9 Beta 5 (RC3) Release πŸ“£
We just released a new beta version please update your version to v2.9 Beta 2 =========== Beta 5 UPD...
6
elementor πŸ“£ Elementor v3.2 Beta 4 Release πŸ“£
The following snippet was recommended to remove eicons: Please confirm this is still applicable for ...
6
elementor Elementor Popup doesnt run with Contact Form 7
Hello @hazelnutz77 Here is a tidier and more versatile piece of code: Add this to your functions.php...
5
elementor πŸš€ Elementor v3.4 Beta 5 Release πŸš€
@fabianenzensperger - thanks for your feedback We are aware about the UI problem with the global fon...
5
elementor Animated Headline Do Not Loop?
Not the most graceful solution but you can do this with some CSS How can i make the animated headlin...
4
elementor "javascript:history.back()" bug since last update
Hi @Code711 Thanks for your input We removed the option to add JavaScript to the URL to avoid potent...
4
elementor BUG: Tabs Widget content enlarges from top left corner when switching tab (after latest updates)
So here is how I temporarily solved this issue a bit hackish solution but it works: It helped in my ...
4
elementor Add "Child Pages of Parent" To "Posts" Widget
@stevenmonson This can be easily done using Custom Query Filter ex: It would be so nice if the Posts...
4
elementor limit DATE fields in Elementor Forms
I just figured this out and I thought it would be useful for everyone because I haven't managed to f...
4
elementor Elementor Pro Bug: The Cards Skin displays only one Badge
@ramiy Not a bug this is the way it works Now as a feature request this should be possible with #444...
4
elementor Pop up menu closing on clicking link
@ErwinvanDeutekom You can use JS to catch a click on a link in your popup and trigger a close action...
3
elementor Elementor Pro Forms MailChimp Conditional Opt-in Field
I needed this functionality too I couldn't (quickly) find usable hooks in Elementor ...
3
elementor Elementor seems to break swiperJS (5.3.0) breakpoint settings (swiper navigation not working)
With Elementor Version 2.9.1 the situation improved but is not fixed completely ...
3
elementor Shape divider above content after updating Elementor.
Hello It's not an Elementor update issue We have the same on 3.0 and 2.9 The problem is only on Chro...
3
elementor How do I change the Date Format in Forms?
You can follow the solution given here: #3605 (comment) minus the translation part ...
192
theme ui Syntax error: pragma and pragmaFrag cannot be set when runtime is automatic.
Just adding here in case anyone sees this error message after upgrading a project to create-react-ap...
94
server Upgrade fails with - Column name "oc_flow_operations.entity" is "NotNull", but has empty string or null as default
I just got this error while upgrading from 17.0.10 to 18.0.10 Also with me the column entity did not...
44
server Thunderbird 60.x unable to use caldav/carddav
By disabling the newly introduced parameter network.cookie.same-site.enabled the problem can be solv...
41
server Redirect loop login / Renewing session token failed
Hello I had a similar issue regarding the redirect mine was related to url overwrite protocol option...
37
bulma [Feature] SASS division without slash
I've just created a fix/divide branch Will merge and release today. This is about Bulma ...
29
materialize Changes for v1.0.0
There are some more issues I would consider to be included in v1.0.0 I think we should consider to r...
27
ant design landing ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
temporary way to fix this problem:ant-design/ant-design#23624 😒 remove less-loader@6.0.6 and instal...
26
bulma Importing Bulma in Create React App
For posterity's sake When importing Bulma in Create React App if you do this: You'll receive this er...
26
server Security and config warnings
Finally got this sorted as well How to use GitHub Please use the πŸ‘ reaction to show that you are af...
23
server Syntax error or access violation: 1118 Row size too large
Changing the ROW_FORMAT to DYNAMIC did not solve the issue Steps to reproduce Run Nextcloud 16.0.0 f...
21
materialize Can't select options or scroll in select input on mobile
I found the solution! With the meta viewport like this work fine for me <meta name=viewport content=...
18
materialize [1.0.0.alpha1] Side nav doesn't work with turbolinks 5
seem like instance still alive when turbolinks:load page it works if we destroy the existing instanc...
18
server [Nextcloud 15] Nextcloud clients cannot log in after upgrading from 15.0.0 to 15.0.2
nextcloud/android#3430 TL;DR: try adding this to your config.php: 'overwriteprotocol' => 'https', ...
18
server [Updater] Could not find resource js/config.js to load
Same issue on Nextcloud 20 PHP 7.4.3 MYSQL 8 APACHE2 Web server error logs How to use GitHub Please ...
18
blueprint First-class support for @import'ing blueprint scss files
@Ciantic It does work with the generated .css files you have to use the Webpack alias resolution ~ c...
17
materialize different colors for different toasts
In Updated Version It's something like: I would like to show the toast like Saved Successfully Pleas...
16
materialize Can't check RadioButtons or Checkbox inside input-fields div
The best solution is to not wrap the checkboxes in the .input-field class Another solution is to add...
16
server Failed Code Integrity because of EXTRA_FILE after Update from 16.0.1 to 16.0.2
Okay so for everyone getting this two things: Delete the cypress.json and the cypress folder in the ...
16
server OSX calendar sync fails (via caldav)
@dhowe I managed to get it working on High Sierra if I select the advanced profile when adding a new...
16
theme ui integrating theme-ui with storybook in a gatsby project
I managed to fix this with the below main.js storybook config As @hasparus says you can force storyb...
13
MaterialDesignInXamlToolkit Could not load file or assembly 'MaterialDesignColors, Culture=neutral' or one of its dependencies
For folks still encountering this issue: this post by Carlos Anderson explains what's going on: Ther...
12
materialize Error with Meteor 1.6-rc7 and node-sass 4.5.2
Not resolved for me I also did a fresh install of Meteor 1.6.0.1 and meteor add materialize:material...