Building The QA Section- Summary:
In this video tutorial on building a QA (Questions and Answers) section, we've explored the art of using accordions to create a dynamic and user-friendly experience for our Dog Shelter website project. With a combination of HTML, CSS, and JavaScript, we've crafted a sleek accordion design that allows users to effortlessly expand and collapse sections to access valuable information about our adorable canine companions. Join us in crafting this interactive element and let's create something truly pawsitively amazing for our website!Here is HTML & CSS Code. For JS code, please watch video.
QA Section HTML Code:
<section class="qa-section">
< h2 class="faq"> Discover Everything You Need to Know About Adopting a Furry Companion! </h2 >
<p > Welcome to our QA section,.... Text Here...</p >
< button class="accordion" > Can I adopt a dog? < /button >
< div class="panel">
< p > Your Answer Here < /p>
"Repeat Code for Button & panel for as many question as you have!"
</div >
</section >
QA Section CSS Code
.qa-section {
width:100%;
margin:0 auto;
height:auto;
background-color:#ffffff;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 60px;
}
.qa-section h2 {
margin: 20px auto;
text-align:center;
}
.qa-section p .qa-section p {
width:80%;
margin:10px auto;
text-align: center;
font-size: 1rem;
margin-bottom:30px;
}
.accordion {
font-size: 1.1rem;
background-color:#f4f4f4;
color: rgb(36, 36, 36);
cursor: pointer;
padding: 18px;
width: 90%;
text-align: left;
border:0.5px solid rgb(223, 184, 252);
outline: none;
transition: 0.4s;
box-shadow: 1px 1px 2px rgb(198, 197, 197);
}
.active-1, .accordion:hover {
background-color:rgb(206, 248, 249);
color:rgb(43, 41, 41);
}
.accordion:after {
content: '\02795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active-1:after {
content: "\2796";
}
.panel {
padding: 20px 10px;
background-color: white;
display: none;
overflow: hidden;
text-align: center;
}
Now is your turn! Remember: "Practice makes perfect"!
Please Do Not Copy & Paste the above code as it will not display. Please type in the above code to practice.