In my opinion, the most effective method would be to assign a width to the container of the accordion. However, if you are hesitant to specify widths explicitly, there is an alternative approach you can consider.
Instead of concealing your collapsible item using display: none, you can utilize visibility: hidden instead. This will make the element invisible and non-interactive, while still maintaining the necessary width for rendering as the element remains present. To eliminate the vertical space, set height: 0.
I have prepared a sample code snippet for you to review:
function toggle(el) {
el.children[0].classList.toggle('hide')
}
* {
font-family: sans-serif;
}
.main {
background: steelblue;
display: flex;
width: 100%;
}
.sidepanel {
background: crimson;
display: flex;
min-height: 100vh;
color: white;
padding: 20px 10px;
}
.container {
display: flex;
}
.hide {
visibility: hidden;
height: 0;
}
<div class="container">
<div class="sidepanel">
<ul onclick="toggle(this)"> Click Me!
<div class="hide">
<li>Data</li>
<li>Data</li>
<li>Data that has some words</li>
</div>
</ul>
</div>
<div class="main"></div>
</div>
However, one drawback of this strategy is that without setting a width on the left panel, it may occupy excessive space if the menu items do not wrap their text. Text wrapping implies a sort of predetermined width, so it's something to keep in mind...