Tuesday

Issue

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.

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');
  }
}

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;
}

<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>

Solution

First of all, avoid using inline style, use classes instead.

It seems all you need is allow the flex box to wrap with

flex-wrap: wrap;

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');
  }
}

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;
  
  flex-wrap: wrap;               /* added */
}

.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;
}


                                 /* added */
.duvidas-etec > p
{
  margin: 0;
}

<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>

Answered By - vanowm

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Tuesday

People also ask with Js, css and html

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels