This content originally appeared on DEV Community and was authored by Ahtsham Ajus
All right, so now we want to style these buttons, these icon buttons, position them.
We want to give functionality to them so we can expand and contract these fake cues.
So we have a class of fake cue dash toggle on the button.
And obviously, we don't want to show the Chevron if it's expanded and we don't want to show the X if
it's if it's not expanded.
So we're going to have to deal with that.
But let's just do some basic stuff here first.
Like the background color I'm going to set to transparent and take away the border set.
Here's HTML code
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./style.css">
<title>FAQ Collapse</title>
</head>
<body>
<h1>Frequently Asked Questions</h1>
<div class="faq-container">
<div class="faq active">
<h3 class="faq-title">
Why shouldn't we trust atoms?
</h3>
<p class="faq-text">
They make up everything
</p>
<button class="faq-toggle">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
<div class="faq">
<h3 class="faq-title">
What do you call someone with no body and no nose?
</h3>
<p class="faq-text">
Nobody knows.
</p>
<button class="faq-toggle">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
<div class="faq">
<h3 class="faq-title">
What's the object-oriented way to become wealthy?
</h3>
<p class="faq-text">
Inheritance.
</p>
<button class="faq-toggle">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
<div class="faq">
<h3 class="faq-title">
How many tickles does it take to tickle an octopus?
</h3>
<p class="faq-text">
Ten-tickles!
</p>
<button class="faq-toggle">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
<div class="faq">
<h3 class="faq-title">
What is: 1 + 1?
</h3>
<p class="faq-text">
Depends on who are you asking.
</p>
<button class="faq-toggle">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
Here's My Css code
@import url("https://fonts.googleapis.com/css?family=Ubuntu&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Ubuntu", sans-serif;
background-color: #f0f0f0;
}
h1 {
margin: 50px 0 30px;
text-align: center;
}
.faq-container {
max-width: 600px;
margin: 0 auto;
}
.faq {
background-color: transparent;
border: 1px solid #9fa4a8;
border-radius: 10px;
margin: 20px 0;
padding: 30px;
position: relative;
overflow: hidden;
transition: 0.3s ease;
}
.faq.active {
background-color: #fff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
}
.faq.active::before,
.faq.active::after {
content: "\f075";
font-family: "Font Awesome 5 Free";
color: #2ecc71;
font-size: 7rem;
position: absolute;
opacity: 0.2;
top: 20px;
left: 20px;
z-index: 0;
}
.faq.active::before {
color: #3498db;
top: -10px;
left: -30px;
transform: rotateY(180deg);
}
.faq-title {
margin: 0 35px 0 0;
}
.faq-text {
display: none;
margin: 30px 0 0;
}
.faq.active .faq-text {
display: block;
}
.faq-toggle {
background-color: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
padding: 0;
position: absolute;
top: 30px;
right: 30px;
height: 30px;
width: 30px;
}
.faq-toggle:focus {
outline: 0;
}
.faq-toggle .fa-times {
display: none;
}
.faq.active .faq-toggle .fa-times {
color: #fff;
display: block;
}
.faq.active .faq-toggle .fa-chevron-down {
display: none;
}
.faq.active .faq-toggle {
background-color: #9fa4a8;
}
Here's My JavaScript code
const toggles = document.querySelectorAll(".faq-toggle");
toggles.forEach((toggle) => {
toggle.addEventListener("click", () => {
toggle.parentNode.classList.toggle("active");
});
});
Here's ouput
This content originally appeared on DEV Community and was authored by Ahtsham Ajus
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Ahtsham Ajus | Sciencx (2021-06-26T13:47:29+00:00) Today I learned To Creat a FAQ Collapse. Retrieved from https://www.scien.cx/2021/06/26/today-i-learned-to-creat-a-faq-collapse/
" » Today I learned To Creat a FAQ Collapse." Ahtsham Ajus | Sciencx - Saturday June 26, 2021, https://www.scien.cx/2021/06/26/today-i-learned-to-creat-a-faq-collapse/
HARVARDAhtsham Ajus | Sciencx Saturday June 26, 2021 » Today I learned To Creat a FAQ Collapse., viewed ,<https://www.scien.cx/2021/06/26/today-i-learned-to-creat-a-faq-collapse/>
VANCOUVERAhtsham Ajus | Sciencx - » Today I learned To Creat a FAQ Collapse. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/26/today-i-learned-to-creat-a-faq-collapse/
CHICAGO" » Today I learned To Creat a FAQ Collapse." Ahtsham Ajus | Sciencx - Accessed . https://www.scien.cx/2021/06/26/today-i-learned-to-creat-a-faq-collapse/
IEEE" » Today I learned To Creat a FAQ Collapse." Ahtsham Ajus | Sciencx [Online]. Available: https://www.scien.cx/2021/06/26/today-i-learned-to-creat-a-faq-collapse/. [Accessed: ]
rf:citation » Today I learned To Creat a FAQ Collapse | Ahtsham Ajus | Sciencx | https://www.scien.cx/2021/06/26/today-i-learned-to-creat-a-faq-collapse/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.