We know that WordPress website are highly advanced where we can do anything in our website, but currently Blogger is advancing day by day, may be it will come over the WordPress in future. We are going to post here a new advanced feature of WordPress that we can do in our Blogger website also, yes we are talking about the Feature to add "FAQs Dropdown section in Blogger".
For a single page with multiple content can also be written like this, where selecting or clicking on one topic displays details about that topic and other are just hidden until we click on next topic. This feature is mainly used in FAQ (Frequently asked Questions) section of websites. So lets move to the our topic, just follow below steps to add FAQ Dropdown section in blogger website. 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.
(ads1)
Table of Content (toc)
What is Accordion (FAQs Section)?
The accordion is a flexible content widget that can display several items neatly. It is often used to display information or links (in this case, we will use it to display ads). It becomes convenient to have open or closed buttons to expand/collapse the content.
Accordion is an automatic function where you can expand and collapse any item simply by clicking on it. Each sub-item will be displayed as per the accordion level, which means when a section expands, the following section collapses and vice – versa.
The accordion is a popular feature among bloggers, especially on personal blogs or small businesses. This content organization technique is easy to create and use on your website.
How to create FAQs Accordion in blogger?
Step1) Go to the Blogger account Dashboard
Step2) In Blogger Dashboard go to the theme section >> Customize >> Edit HTML
Step3) Now In Edit HTML Search <head> tag and Insert this stylesheet link in-between <head> and </head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"></link> (code-box)
Step4) Now Search ]]></b:skin> tag & Put this CSS code before ]]></b:skin>
.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;
} (code-box)
Step5) Now Search </body> tag & Paste this JAVASCRIPT code before </body>
<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>(code-box)
(ads1)
Step6) Now create a New Posts & Paste this HTML Code where you want to Show your Faqs Accordion in blogger posts.
<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> (code-box)
Congratulations! You've successfully added a Faq Accordion to your Blogger posts.
DEMO :
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.
Conclusion
Accordion is one of the most innovative and most creative additions to a platform like a blogger. This gradually builds reader's curiosity as they want to know what has been written in the next section or paragraph.
I hope this post has been helpful to you. If you like these posts, please share them with your friends, and if you have any queries, please write in the comments box below.
