0

Boa tarde, estou criando um FAQ, e nele existem algumas perguntas que quando forem clicadas, devem aparecer a resposta dela logo abaixo, para fazer isso criei um toggle em JQUERY.

Para garantir que a pessoa não abra todas as perguntas e faça elas passarem do div que elas precisam ficar, eu coloquei uma função que fecha todas as perguntas antes que ela abra a pergunta clicada, assim não existe risco das perguntas quebrarem a página.

Mas isso impede que o toggle da pergunta clicada, possa fazer com que ela se feche, pois, antes disso eu já havia fechado todas as perguntas, gostaria de criar uma função que consiga fechar todas as perguntas para que elas não quebrem a página, mas que também permita que eu clique duas vezes na mesma pergunta e ela se feche também.

Segue o código do FAQ que estou criando com os scripts:

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <script src="./JS/jquery-3.3.1.min.js" defer></script>
  <script src="./JS/scripts.js" defer></script>
  <title>Frontend Mentor | FAQ Accordion Card</title>

 <style>
    body{
    background-color: rgb(225,232,231);
    font-family: Arial, Helvetica, sans-serif;
}



.purple{
    background-image: linear-gradient( #AE69EA , #6A63E7);
    display: block;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    height: 650px;
    box-shadow:  3px 4px 20px#3D3D3D;
    position: relative;
    z-index: 1;
}

.box{
    position: absolute;
    width: 16%;
    top: 42%;
    left: 5%;
    z-index: 1;
    
}

.white{
    background-color: #F5F5F5;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 18%;
    width: 70%;
    height: 65%;
    border-radius: 20px;
    box-shadow:  4px 5px 40px#3D3D3D;

    overflow: hidden;

} 


.woman{
    position: absolute;
    width: 50%;
    top: 10%;
    left: -70px;
    z-index: 0

}

.woman_mobile{
    display: none;
}

.faq{
    
    position: absolute;
    margin-top: 50px;
    margin-left: 50%;

}


.faq h2{
    font-size: 16px;
    margin: 10px 15px;
}
 
.question h1{
    color: #5C5C5C;
    margin: 12px 15px;
    display: inline-block;
    font-size: 16px;

} 

.question :hover{
    color: #F57B56;
    font-size: 17px

}

.faq p{
    color: grey;
    font-size: 15px;
    margin: 5px 15px;
    
}

.answer{
    color: black;
    display: none;

}

.answer p{
    color: black

}

.button{
}

.background{
    position: absolute;
    z-index: -1;
    bottom: 0px;
}

.attribution{
    margin-top: 2%;
    text-align: center;

}



@media (max-width: 1200px){

    .white{
        overflow: visible;

    }

    .woman{
        display: none
    }

    
    .woman_mobile{
        display: initial;
        position: relative;
        top: -25%;
        display: block;
        margin-left: auto;
        margin-right: auto;              
                 
    }

    .box{
        display: none;

    }

    .faq{
        display: block;
        position: relative;
        top: -165px;
        position: relative;
        margin-right: auto;
        margin-left: auto;
        text-align: center;

    
    }
    .faq h2{
        font-size: 25px;
        margin: 10px 15px;
    }
     

    .question h1{
        color: #5C5C5C;
        font-size: 16px;
        margin: 15px 0px;
        font-size: 16px;

    
    } 

}

@media (max-width: 500px){

    .purple{
      
        height: 750px;
        
    }

    .white{
   
        width: 80%;
        height: 75%;
     
    } 

    .woman_mobile{
        margin-left: 5%;
        top: -20%;
              
         
    }

    .faq{
        text-align: justify;
        margin-left: 17px;
    }
    
    .question :hover{
        color: #F57B56;
        font-size: 15px
    
    }
    
    .faq h2{
        text-align: center;
        margin-left: 0px;
        font-size: 25px;
    }
    
    .question h1{
     
        font-size: 14px;

    
    } 

}

  </style>

</head>
<body>
  
  <div class="purple">
  
    <img class="box" src="./images/illustration-box-desktop.svg">

    <div class="white">
      <img class="woman_mobile" src="./images/illustration-woman-online-mobile.svg" alt="mobile_woman">

  <img class="woman" src="./images/illustration-woman-online-desktop.svg">

  <div class="faq">

    <h2>FAQ</h2><br>


    <div class="question">

      <h1>How many team members can I invite?</h1> <img src="./images/icon-arrow-down.svg" class="button" alt="button">
      
      <div class="answer">
        <P>You can invite up to 2 additional users on the Free plan. There is no limit on 
        team members for the Premium plan.</P><br>
      </div>

    </div>

    <div class="question">

      <h1>What is the maximum file upload size?</h1> <img src="./images/icon-arrow-down.svg" class="button" alt="button">

      <div class="answer">
        <P>No more than 2GB. All files in your account must fit your allotted storage space.</P><br>
      </div>

    </div>

  
    <div class="question">

      <h1>How do I reset my password?</h1> <img src="./images/icon-arrow-down.svg" class="button" alt="button">    

      <div class="answer">
        <P>Click “Forgot password” from the login page or “Change password” from your profile page.
        A reset link will be emailed to you.</P><br>
      </div>   

    </div>  


    <div class="question">

      <h1>Can I cancel my subscription?</h1> <img src="./images/icon-arrow-down.svg" class="button" alt="button">        

      <div class="answer">
          <P>Yes! Send us a message and we’ll process your request no questions asked.</P><br>
      </div> 

    </div>


    <div class="question">

      <h1>Do you provide additional support?</h1> <img src="./images/icon-arrow-down.svg" class="button" alt="button">

      <div class="answer">
        <P>Chat and email support is available 24/7. Phone lines are open during normal business hours.</P><br>
      </div>

    </div>

    
  </div>

</div>
Challenge by Frontend Mentor. Coded by Vinicius Gava Pereira.

JQUERY:

$(".question").click(function(){
    
    $(".answer").hide()

    $(this).children(".answer").toggle()

})

2 Respostas 2

0

Opá, então, acho que esse seu problema pode ser resolvido armazenando o display do elemento em uma variável e depois um simples if pra ver se tava aberto:

$(".question").click(function(){
    var display = $(this).children(".answer").css('display')
    
    $(".answer").hide()
    
      $(this).children(".answer").toggle()
  
      if(display == 'block') {
        $(this).children(".answer").hide()
      }
})
   body{
    background-color: rgb(225,232,231);
    font-family: Arial, Helvetica, sans-serif;
}



.purple{
    background-image: linear-gradient( #AE69EA , #6A63E7);
    display: block;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    height: 650px;
    box-shadow:  3px 4px 20px#3D3D3D;
    position: relative;
    z-index: 1;
}

.box{
    position: absolute;
    width: 16%;
    top: 42%;
    left: 5%;
    z-index: 1;
    
}

.white{
    background-color: #F5F5F5;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 18%;
    width: 70%;
    height: 65%;
    border-radius: 20px;
    box-shadow:  4px 5px 40px#3D3D3D;

    overflow: hidden;

} 


.woman{
    position: absolute;
    width: 50%;
    top: 10%;
    left: -70px;
    z-index: 0

}

.woman_mobile{
    display: none;
}

.faq{
    
    position: absolute;
    margin-top: 50px;
    margin-left: 50%;

}


.faq h2{
    font-size: 16px;
    margin: 10px 15px;
}
 
.question h1{
    color: #5C5C5C;
    margin: 12px 15px;
    display: inline-block;
    font-size: 16px;

} 

.question :hover{
    color: #F57B56;
    font-size: 17px

}

.faq p{
    color: grey;
    font-size: 15px;
    margin: 5px 15px;
    
}

.answer{
    color: black;
    display: none;

}

.answer p{
    color: black

}

.button{
}

.background{
    position: absolute;
    z-index: -1;
    bottom: 0px;
}

.attribution{
    margin-top: 2%;
    text-align: center;

}



@media (max-width: 1200px){

    .white{
        overflow: visible;

    }

    .woman{
        display: none
    }

    
    .woman_mobile{
        display: initial;
        position: relative;
        top: -25%;
        display: block;
        margin-left: auto;
        margin-right: auto;              
                 
    }

    .box{
        display: none;

    }

    .faq{
        display: block;
        position: relative;
        top: -165px;
        position: relative;
        margin-right: auto;
        margin-left: auto;
        text-align: center;

    
    }
    .faq h2{
        font-size: 25px;
        margin: 10px 15px;
    }
     

    .question h1{
        color: #5C5C5C;
        font-size: 16px;
        margin: 15px 0px;
        font-size: 16px;

    
    } 

}

@media (max-width: 500px){

    .purple{
      
        height: 750px;
        
    }

    .white{
   
        width: 80%;
        height: 75%;
     
    } 

    .woman_mobile{
        margin-left: 5%;
        top: -20%;
              
         
    }

    .faq{
        text-align: justify;
        margin-left: 17px;
    }
    
    .question :hover{
        color: #F57B56;
        font-size: 15px
    
    }
    
    .faq h2{
        text-align: center;
        margin-left: 0px;
        font-size: 25px;
    }
    
    .question h1{
     
        font-size: 14px;

    
    } 

}
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!--   <script src="./JS/jquery-3.3.1.min.js" defer></script> -->
  <script src="./JS/scripts.js" defer></script>
  <title>Frontend Mentor | FAQ Accordion Card</title>

</head>
<body>
  
  <div class="purple">
  
    <img class="box" src="./images/illustration-box-desktop.svg">

    <div class="white">
      <img class="woman_mobile" src="./images/illustration-woman-online-mobile.svg" alt="mobile_woman">

  <img class="woman" src="./images/illustration-woman-online-desktop.svg">

  <div class="faq">

    <h2>FAQ</h2><br>


    <div class="question">

      <h1>How many team members can I invite?</h1> <img src="./images/icon-arrow-down.svg" class="button" alt="button">
      
      <div class="answer">
        <P>You can invite up to 2 additional users on the Free plan. There is no limit on 
        team members for the Premium plan.</P><br>
      </div>

    </div>

    <div class="question">

      <h1>What is the maximum file upload size?</h1> <img src="./images/icon-arrow-down.svg" class="button" alt="button">

      <div class="answer">
        <P>No more than 2GB. All files in your account must fit your allotted storage space.</P><br>
      </div>

    </div>

  
    <div class="question">

      <h1>How do I reset my password?</h1> <img src="./images/icon-arrow-down.svg" class="button" alt="button">    

      <div class="answer">
        <P>Click “Forgot password” from the login page or “Change password” from your profile page.
        A reset link will be emailed to you.</P><br>
      </div>   

    </div>  
 

    <div class="question">

      <h1>Can I cancel my subscription?</h1> <img src="./images/icon-arrow-down.svg" class="button" alt="button">        

      <div class="answer">
          <P>Yes! Send us a message and we’ll process your request no questions asked.</P><br>
      </div> 

    </div>


    <div class="question">

      <h1>Do you provide additional support?</h1> <img src="./images/icon-arrow-down.svg" class="button" alt="button">

      <div class="answer">
        <P>Chat and email support is available 24/7. Phone lines are open during normal business hours.</P><br>
      </div>

    </div>

    
  </div>

</div>

Adicionei o CDN do jquery, e comentei o seu no seu exemplo só para funfar aqui no stack, valeu!! Espero ter ajudado :)

0

Muito obrigado cara!!!

Funcionou direitnho aqui, eu tentei usar variáveis de controle, mas não consegui o resultado que você me trouxe.

Sou novo no Stackoverflow, o que seria CDN?

1
  • Opa, que bom que funcionou!! Não esquece de marcar a minha resposta como solução da pergunta pra ajudar outras pessoas!! CDN seria Content Delivery Network são servidores espalhados por aí no mundão, que te entregam conteúdos baseado na sua localização, te fornecendo do servidor mais próximo, resumidamente seria isso. Usando ele, você não precisa ter o jquery baixado no seu projeto, pois estará pegando ele de um CDN que te serve o conteúdo, daí, funfa aq no stack =) 2/01/2021 às 18:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .