0
Good afternoon, I am creating a FAQ, and in it there are some questions that when they are clicked, should appear her answer right below, to do this I created a toggle in JQUERY.
To ensure that the person doesn’t open all the questions and make them go past the div they need to be, I put a function that closes all the questions before they open the clicked question, so there is no risk of the questions breaking the page.
But this prevents the toggle of the clicked question, can make it close, because before that I had already closed all the questions, I would like to create a function that can close all the questions so that they do not break the page, but also allow me to double-click the same question and close it as well.
Follow the FAQ code I am creating with the 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>
JQUERY:
$(".question").click(function(){
$(".answer").hide()
$(this).children(".answer").toggle()
})
Oops, good that it worked!! Do not forget to mark my answer as a solution to the question to help other people!! CDN would be Content Delivery Network are servers scattered around the world, which deliver content based on your location, providing you from the nearest server, briefly would be that. Using it, you don’t need to have jquery downloaded into your project, because you’ll be picking it up from a CDN that serves you content, hence funnel aq in stack =)
– andre_luiss