Criei um collapse porém eu não estou conseguindo fazer com que ele empurre as Divs para baixo, assim ficando sobreposto ao conteúdo.
Tentei alguns códigos no CSS mas não estão dando resultado.
HTML:
<div id="collapsible-menu">
<button type="button" class="collapsible"><img src="/img/header/earth-grid-symbol.png" alt="Menu Linguagem"></button>
<div class="content">
<img src="img/header/earth.png">
<img src="img/header/br.png">
</div>
JAVASCRIPT:
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
CSS:
display: flex;
flex-direction: column;
border: 2px solid #f0db00;
}
button.collapsible {
cursor: pointer;
border: none;
text-align: left;
outline: none;
background-color: transparent;
}
.content{
border: 2px solid #f0db00;
margin-left: -250px;
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}