I’m doing an people also ask section, just like the google one. But i’m having troubles with my js.
In my js code i’m using sibbilings and parents functions to create a new div. To temporaly replace one div. But the father div is losing the formatation “justify-content”. And i don’t know how to fix it.
`
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="assets/CSS/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet"
/>
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
<!-- João Macedo (Contribuição vai das dúvidas até o footer)-->
<!--Adicionei as imagens das redes sociais (provavelmente que fez o header tbm tem, mas com nome diferente lembra de mudar)-->
<section class="secao-duvidas">
<div class="duvidas">
<div class="tire-duvidas">
<h2>Tire suas dúvidas</h2>
</div>
<div class="duvidas-box">
<div class="duvidas-etec">
<p class="numero">1</p>
<p class="texto-caixa-duvida">DUVIDA</p>
<img src="assets/img/Group 2.png" class="seta-baixo" onclick="toggleResposta(this)">
<div class="resposta">
<p class="resp">Sou um texto muito convincente sobre esse assunto aqui que voce perguntou</p>
</div>
</div>
<div class="duvidas-etec">
<p class="numero">2</p>
<p class="texto-caixa-duvida">DUVIDA</p>
<img src="assets/img/Group 2.png" class="seta-baixo" />
</div>
<div class="duvidas-etec">
<p class="numero">3</p>
<p class="texto-caixa-duvida">DUVIDA</p>
<img src="assets/img/Group 2.png" class="seta-baixo" />
</div>
<div class="duvidas-etec">
<p class="numero">4</p>
<p class="texto-caixa-duvida">DUVIDA</p>
<img src="assets/img/Group 2.png" class="seta-baixo" />
</div>
<div class="duvidas-etec">
<p class="numero">5</p>
<p class="texto-caixa-duvida">DUVIDA</p>
<img src="assets/img/Group 2.png" class="seta-baixo" />
</div>
<div class="duvidas-etec">
<p class="numero">6</p>
<p class="texto-caixa-duvida">DUVIDA</p>
<img src="assets/img/Group 2.png" class="seta-baixo" />
</div>
<div class="duvidas-etec">
<p class="numero">7</p>
<p class="texto-caixa-duvida">DUVIDA</p>
<img src="assets/img/Group 2.png" class="seta-baixo" />
</div>
</div>
</div>
</section>
<footer>
<div class="container-footer">
<div class="redes-sociais">
<img src="assets/img/linkedin-logo 1.png" class="linkedin" />
<img src="assets/img/tiktok 1.png" class="tiktok" />
<img src="assets/img/youtube (1) 1.png" class="youtube" />
<img src="assets/img/twitter 1.png" class="twitter" />
<img src="assets/img/instagram 1.png" class="instagram" />
<img src="assets/img/facebook (1) 1.png" class="facebook" />
</div>
<img
src="assets/img/cropped-BRASÃO-ESCOLA-OFICIAL-2-1 1.png"
class="logo-etec"
/>
</div>
</footer>
</body>
</html>`
`CSS
ul{
list-style: none;
}
.secao-duvidas{
width: 100%;
display: flex;
justify-content: center;
}
.tire-duvidas{
color: white;
width: 50vw;
height: 7vw;
background-color: #B20000;
}
.duvidas-box{
background-color: #FFFFFF;
border: #FFFFFF 1px solid;
border-radius: 5px;
height: 30vw;
filter: drop-shadow(grey 0.6px 0.6px 2px);
height: auto;
min-height: 30vw;
}
.tire-duvidas h2{
font-size:49px;
padding-top: 1.5vw;
text-align: center;
}
.duvidas-etec{
background-color: #D9D9D9;
width: 44vw;
height:2.5vw;
margin-top: 1.5vw;
margin-left: 2.7vw;
display: flex;
align-items: center;
filter:drop-shadow(grey 0.6px 0.6px 1.5px);
justify-content: space-between;
}
.numero{
padding-left: 0.5vw;
color: white;
font-size:20px;
font-family: 'Roboto',sans-serif;
}
.seta-baixo{
padding-top: 0.8vw;
padding-right: 1vw;
height: 0.7vw;
}
.duvidas-etec {
overflow: hidden;
transition: height 0.3s ease-out;
}
.duvidas-etec.expandido {
height: 150px;
transition: height 0.5s ease-in;
justify-content: space-between;
}
.duvidas-etec .duvidas-etec.expandido{
justify-content: space-between;
}
.resp{
margin-top: 4em;
margin-right: 15em;
width: 90%;
}
.resposta {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.duvidas-etec.expandido .resposta {
height: auto;
max-height: 1000px;
transition:max-height 0.5s ease-in;
}
.resposta {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
margin-top: 0;
}
/* FINAL DA SESSÃO DE DUVIDAS */
/* COMEÇO DO FOOTER */
footer{
width: 100%;
margin-top: 5vw;
border: gray 1px solid;
}
.container-footer{
filter: drop-shadow(0px -17px 3px #000000);
display: flex;
justify-content: space-between;
}
.logo-etec{
width: 18vw;
}
.redes-sociais{
margin-left: 1vw;
}
.redes-sociais img{
margin-top: 2vw;
padding: 3px;
width: 2.5vw;
}
`JS
function toggleResposta(element) {
var resposta = element.nextElementSibling;
var duvidasEtec = element.closest('.duvidas-etec');
if (resposta.style.display === 'block') {
resposta.style.display = 'none';
duvidasEtec.classList.remove('expandido');
} else {
resposta.style.display = 'block';
duvidasEtec.classList.add('expandido');
}
}
``