couldntfindabetterusername
4 years ago
parent
1b698c7728
commit
45b27b8387
@ -0,0 +1,89 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>12 faq collapse</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
|
||||||
|
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
|
||||||
|
crossorigin="anonymous" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1>Frequently asked questions</h1>
|
||||||
|
|
||||||
|
<div class="faq">
|
||||||
|
<div class="question">
|
||||||
|
<span class="ques">Why shouldn't we trust atoms?</span>
|
||||||
|
<button class="btn">
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
<i class="fas fa-times"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="answer">They make up everything.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="faq">
|
||||||
|
<div class="question">
|
||||||
|
<span class="ques">What do you call someone with no body and no nose?</span>
|
||||||
|
<button class="btn">
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
<i class="fas fa-times"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="answer">
|
||||||
|
nobody knows.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq">
|
||||||
|
<div class="question">
|
||||||
|
<span class="ques">What's the object-oriented way to become wealthy?</span>
|
||||||
|
<button class="btn">
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
<i class="fas fa-times"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="answer">
|
||||||
|
inheritance.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq">
|
||||||
|
<div class="question">
|
||||||
|
<span class="ques">How many tickles does it take to tickle an octopus?</span>
|
||||||
|
<button class="btn">
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
<i class="fas fa-times"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="answer">
|
||||||
|
ten-tickles.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq">
|
||||||
|
<div class="question">
|
||||||
|
<span class="ques">What is:1+1?</span>
|
||||||
|
<button class="btn">
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
<i class="fas fa-times"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="answer">
|
||||||
|
depends on who you are asking.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
const btns = document.querySelectorAll("button");
|
||||||
|
|
||||||
|
btns.forEach((btn) => {
|
||||||
|
let opened = false;
|
||||||
|
btn.addEventListener("click", (e) => {
|
||||||
|
console.log(e.path[3]);
|
||||||
|
|
||||||
|
if (!opened) {
|
||||||
|
e.path[3].classList.add("active");
|
||||||
|
opened = true;
|
||||||
|
} else {
|
||||||
|
e.path[3].classList.remove("active");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 100px;
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 25px;
|
||||||
|
width: 700px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq {
|
||||||
|
padding: 40px 30px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ques {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background-color: unset;
|
||||||
|
border: unset;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-chevron-down {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-times {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 300;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq.active {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq.active .btn .fa-chevron-down {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.faq.active .btn .fa-times {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq.active .answer {
|
||||||
|
display: block;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue