PageBuilder Elementor comes with a lot of handy widgets by default. One of them is the „Toggle“ and „Accordion“ widget.
What is the difference between the toggle and the Accordion widget?
The toggle widget opens each element individually. You can have all elements open at the same time.
The Accordion widget closes all other elements when you open one. By default, the first element of the Accordion is open. But sometimes you want to have all Accordion elements closed from the beginning. This can be done with a small script.
In the following video I show you how it works!
How to display all Accordion elements closed
To show all Accordion elements closed when entering the page, you just have to place an HTML widget anywhere and insert the following code. I usually place it just below the Accordion (the visitor to the web page will not see this element).
<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>Then save the page and the Accordion elements are closed.
2 Responses
Hallo Andreas,
ich habe es genau so gemacht, aber es funktioniert leider nicht. Wäre es zu viel verlangt, wenn du dir das mal 1 Minute anschaust? 😉
Hallo Edda,
Elementor hat dieses Problem bereits in einem Update gelöst (kann aber sein, dass das nur in der PRO Version inkludiert ist).
Wenn du in den Einstellungen von Elementor „Nested Elements“ aktivierst, dann hast du das neue Accordion-Widget zur Verfügung, wo du auch einstellen kannst, dass das erste Element nicht geöffnet sein soll.