How to Add Stylish Accordion in Blogger Posts

 

Hi to all, in this article I am going to tell you all about how to add stylish accordion in blogger website by using HTML and CSS.

Accordion is a type of button, when we clicked on this button the content will appear in it and when when we again click the button the content disappears.

By using the accordion, it provides your blog post more clear and informative and gives a professional look to your website and it optimize your blog post.

By adding the code in your post will not effect your webpage speed, so you can use this code in any blogger template freely.

Read the below provided steps carefully to get clear understanding about how to add stylish accordion in blogger posts easily without any error or issue.

Steps to Add Stylish Accordion in Blogger Posts

---

Step-1: First of all you all need to login to your blogger website dashboard by using your login credentials.

Step-2: Go to blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download theme.

Step-3: Go to blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor.

Step-4: Copy the below provided CSS code and paste the copied CSS code above closing head tag or </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>
Copy

Step-5: Click on save button.

Step-6Now open the blog post where you want to add this stylish accordion.

Step-7: Copy the below provided HTML code and paste the copied HTML code in the blog post where you want to show the accordion.

<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>
Copy

Step-8: You need to write your content inside the summary and paragraph tag in HTML code and you can add so many accordions by just copy pasting the accordion codes in your blog post.

Step-9: After adding the content click on publish or update button.

Step-10: Now you have successfully added stylish accordion in your blogger website easily in just few minutes.

Note

---

If you get any error or issue while saving the code in your blogger theme editor then you need to restore your backup theme code again and need to follow the same steps as mentioned above carefully.

If you want to change any style or color you need to change the CSS code, and to change the colors, you need to replace the color codes with the default color codes and for color codes you can use google color picker or any other third party website.

Demo  FAQ Accordion

---

FAQ 1 : 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.

FAQ 2 : What is the use of Accordion?

By using the accordion, it provides your blog post more clear and informative and gives a professional look to your website and it optimize your blog post.

FAQ 3 : Will this code effect our webpage speed?

By adding the code in your post will not effect your webpage speed, so you can use this code in any blogger template freely.

Conclusion

---

I hope that you have understood about how to add stylish accordion in blogger website easily in just few minutes by using HTML and CSS.