Stylish FAQ Accordion for Blogger

Hello friends! Welcome to your anutrickz.blogspot.com blog. So in this article today we are going to talk about how to add Accordion in Blogger Post | Create Accordion Widget in Blogger.

Description

FAQ Accordion is a simple, easy to apply and customize instrument to demonstrate a list of the most popular questions with answers on a personal website. An adaptive widget with simple design gives you a chance to share extensive information about your offers, pay customer attention to the advantages of your products

What is Accordion ?

Accordion is a type of button when you click this button the content appear in it and again when you click this button the content disappear.

Advantages of Accordion.

Accordion makes your blog post more clean and informative.
Accordion makes your blog post SEO optimised.
Google uses Accordion in FAQ section.

How to Add Accordion in blogger ?

Login to blogger dashboard
Then go to Edit html
Now add this below css Above </head> tag

<style>
summary { font-size: 1.25rem; font-weight: 600; background-color: #fefefe; color: #333; isolation: isolate; padding: 1rem; margin-bottom: 1rem; box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6; border-radius: 0.25rem; text-align: left; cursor: pointer; position: relative; } details > summary::after { position: absolute; content: "+"; right: 20px; } details[open] > summary::after { position: absolute; content: "-"; right: 20px; } details > summary::-webkit-details-marker { display: none; } details[open] summary ~ * { animation: sweep .5s ease-in-out; animation: sweep .5s ease-in-out; box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6, 4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #ffffff inset; isolation: isolate; margin-bottom: 1rem; background-color: #fefefe; padding: 1rem; } @keyframes sweep { 0% {opacity: 0; margin-top: -10px} 100% {opacity: 1; margin-top: 0px} }
</style>

Save the theme
Now go to that post where u want to add this widget
In the html mode add this below html code

<details>
<summary>FAQ 1 : What is Lorem Ipsum?</summary>
<div class="$(function(AT-FAQ)">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
</details>
<details>
<summary>FAQ 2 : What is Lorem Ipsum?</summary>
<div class="$(function(AT-FAQ)">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
</details>
<details>
<summary>FAQ 3 : What is Lorem Ipsum?</summary>
<div class="$(function(AT-FAQ)">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
</details>