checkout my YT channel for more videos.
Here is all the code used in the video.
Index.html:
<!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" />
<link rel="stylesheet" href="stylesheet.css" />
<title>FAQ | Web Component</title>
</head>
<body>
<div class="container">
<h2>Frequently Asked Questions</h2>
<div class="accordion">
<div class="accordion-item">
<button aria-expanded="false">
<span class="accordion-title"
>Why is the moon sometimes out during the day?</span
>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra
suspendisse potenti.
</p>
</div>
</div>
<div class="accordion-item">
<button aria-expanded="false">
<span class="accordion-title">Why is the sky blue?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra
suspendisse potenti.
</p>
</div>
</div>
<div class="accordion-item">
<button aria-expanded="false">
<span class="accordion-title">Will we ever discover aliens?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra
suspendisse potenti.
</p>
</div>
</div>
<div class="accordion-item">
<button aria-expanded="false">
<span class="accordion-title">How much does the Earth weigh?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra
suspendisse potenti.
</p>
</div>
</div>
<div class="accordion-item">
<button aria-expanded="false">
<span class="accordion-title">How do airplanes stay up?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra
suspendisse potenti.
</p>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
stylesheet.css:
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: #fff;
--text: #314b6b;
--gray: #4d5974;
--lightgray: #e5e5e5;
--blue: #2f79ce;
}
body {
font-family: "Poppins", sans-serif;
background: var(--bg);
color: var(--gray);
min-height: 100vh;
}
.container {
margin: 0 auto;
padding: 4rem;
width: 48rem;
}
.accordion {
margin-top: 20px;
}
.accordion .accordion-item {
border-bottom: 1px solid var(--lightgray);
}
.accordion .accordion-item button[aria-expanded="true"] {
border-bottom: 1px solid var(--blue);
}
.accordion button {
position: relative;
display: block;
text-align: left;
width: 100%;
padding: 1em 0;
color: var(--text);
font-size: 1.1rem;
font-weight: 400;
border: none;
outline: none;
background: none;
}
.accordion button:hover,
.accordion button:focus {
cursor: pointer;
color: var(--blue);
}
.accordion button .accordion-title {
padding: 1em 1.5em 1em 0;
}
.accordion button .icon {
display: inline-block;
position: absolute;
top: 18px;
right: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 22px;
}
.accordion button .icon::before {
display: block;
position: absolute;
content: "";
top: 9px;
left: 5px;
width: 10px;
height: 2px;
background: currentColor;
}
.accordion button .icon::after {
display: block;
position: absolute;
content: "";
top: 5px;
left: 9px;
width: 2px;
height: 10px;
background: currentColor;
}
.accordion .accordion-item button[aria-expanded="true"] {
color: var(--blue);
}
.accordion .accordion-item button[aria-expanded="true"] .icon::after {
width: 0;
}
.accordion .accordion-item button[aria-expanded="true"] + .content {
opacity: 1;
max-height: 9em;
transition: all 200ms linear;
}
.content {
opacity: 0;
max-height: 0;
transition: opacity 200ms linear, max-height 200ms linear;
}
.content p {
font-size: 1rem;
font-weight: 300;
margin: 1em 0;
}
app.js:
const items = document.querySelectorAll(".accordion button");
items.forEach((item) => item.addEventListener("click", toggleAccordion));
function toggleAccordion() {
const itemToggle = this.getAttribute("aria-expanded");
for (let item of items) {
item.setAttribute("aria-expanded", false);
}
if (itemToggle === "false") {
this.setAttribute("aria-expanded", true);
}
}
Top comments (0)