CODEWITHSUNDEEP
javascripthtmlcssaccordiontransition
Marius Kleinz
Marius Kleinz

Reputation: 13

Javascript - accordion doesn't start collapsed

With the help of this article I created a javascript accordion.

The only problem is, that it doesn't start collapsed and I can't seem to get it that way.

Thanks for your help

CODEPEN

<div id="toggle-button1" class="section akkordeon">
<div class="akkordeon-title">LOREM IPSUM TITLE</div>
<div id="akkordeon-content1" class="section collapsible">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

Upvotes: 1

Views: 102

Answers (3)

Maksims Kitajevs
Maksims Kitajevs

Reputation: 225

Just make your container hide by default.

.collapsible {
   height: 0;
}

And remove this line from code so it does not collapse back:

//(line 42) element.style.height = null;

Upvotes: 1

Josef Ipinge
Josef Ipinge

Reputation: 11

var section = document.querySelector('#akkordeon-content1');
collapseSection(section)

add that code to your javascript. outside of anything

Upvotes: 1

Wimanicesir
Wimanicesir

Reputation: 5122

Add some css to set the initial value to 0

#akkordeon-content1 {
  height: 0;
}

Also there is an HTML element called details who does this functionality for you.

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Upvotes: 1

Related Questions