An accordion is a single-page document that contains multiple sections, where at each level one of the sections is displayed and all the others are hidden. This is useful for displaying large chunks of information in compact spaces or for dealing with the very long questions where you need to show only the first half of the question text alongside an "open more" link for the remainder.
Faq Accordion sections are useful for almost any type of long-form content, including tutorials, guides, and FAQs. This tutorial will walk you through the process to create a Faq section with Blogger. You can use it as is or customize this on your own blog.
FAQs Accordion is also helpful to determine a FAQs schema in blogger easily.
The article deals with the development of an accordion of FAQ for articles in blogs using CSS and HTML, on the basis of discussing the pros and cons of such decisions. The assumption is on such features as maintenance, accessibility, code readability and more.
So Let's Start a Posts
What is Accordion?
Follow 3 Steps to create Faqs Accordion in blogger
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">.containerwidth {
width: 100%;
}
.wrapper {
background-color: #ffffff;
padding: 10px 20px;
margin-bottom: 20px;
border-radius: 5px;
-webkit-box-shadow: 0 15px 25px rgba(0, 0, 50, 0.2);
box-shadow: 0 15px 25px rgba(0, 0, 50, 0.2);
}
.toggle,
.content {
font-family: "Poppins", sans-serif;
}
.toggle {
width: 100%;
background-color: transparent;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 16px;
color: #111130;
font-weight: 600;
border: none;
outline: none;
cursor: pointer;
padding: 10px 0;
}
.content {
position: relative;
font-size: 14px;
text-align: justify;
line-height: 30px;
height: 0;
overflow: hidden;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}<script>
//<![CDATA[
let toggles = document.getElementsByClassName("toggle");
let contentDiv = document.getElementsByClassName("content");
let icons = document.getElementsByClassName("icon");
for (let i = 0; i < toggles.length; i++) {
toggles[i].addEventListener("click", () => {
if (parseInt(contentDiv[i].style.height) != contentDiv[i].scrollHeight) {
contentDiv[i].style.height = contentDiv[i].scrollHeight + "px";
toggles[i].style.color = "#0084e9";
icons[i].classList.remove("fa-plus");
icons[i].classList.add("fa-minus");
} else {
contentDiv[i].style.height = "0px";
toggles[i].style.color = "#111130";
icons[i].classList.remove("fa-minus");
icons[i].classList.add("fa-plus");
}
for (let j = 0; j < contentDiv.length; j++) {
if (j !== i) {
contentDiv[j].style.height = 0;
toggles[j].style.color = "#111130";
icons[j].classList.remove("fa-minus");
icons[j].classList.add("fa-plus");
}
}
});
}
//]]>
</script><div class="boxaccordion">
<div class="containerwidth">
<div class="wrapper">
<button class="toggle">How FAQs Accordion help us to rank our website?<i class="fas fa-plus icon"></i></button>
<div class="content">
<p>FAQs accordion is a great way to help you build authority and trust, and at the same time bestow a bit of personality on the website. It also helps you answer frequently asked questions, produce additional content quickly, and reduce bounce rates.</p>
</div>
</div>
<div class="wrapper">
<button class="toggle">What is the benefits of FAQs Accordion in blogger?<i class="fas fa-plus icon"></i></button>
<div class="content">
<p>Benefit of FAQs accordion for blogger is that it helps your blog visitors to find what they are looking for in less time.</p>
</div>
</div>
<div class="wrapper">
<button class="toggle">Does FAQs Scheme Help Us to Rank our Site in Top Position?<i class="fas fa-plus icon"></i></button>
<div class="content">
<p> Yes, Frequently Asked Questions scheme will make your website more popular and increase your search engine ranking position.</p>
</div>
</div>
</div>
</div>DEMO: FAQs (Frequently Asked Questions)
FAQs accordion is a great way to help you build authority and trust, and at the same time bestow a bit of personality on the website. It also helps you answer frequently asked questions, produce additional content quickly, and reduce bounce rates.
Benefit of FAQs accordion for blogger is that it helps your blog visitors to find what they are looking for in less time.
Yes, Frequently Asked Questions scheme will make your website more popular and increase your search engine ranking position.
