What is Accordion?
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.
Follow 3 Steps to create Faqs Accordion in blogger
- Go to the Blogger account Dashboard.
- In Blogger Dashboard go to the theme section » Customize » Edit HTML
- Now In Edit HTML Search <head> tag and Insert this stylesheet link in-between <head> to </head>
- Search ]]></b:skin> tag and Put the following CSS code just above ]]></b:skin> tag.
- Now Search </body> tag and Paste the following JAVASCRIPT code just above </body> tag.
- Now create a New Posts and Paste this HTML Code where you want to Show your Faqs Accordion in blogger posts.
Congratulations! You've successfully added a Faq Accordion to your Blogger posts.
<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 type='text/javascript'>
//<![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)
Click Here to View Demo.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.