How to Add Stylish Accordion In Blogger Post Or Page

Hello everyone today we are going to learn how to add a nice stylish accordion in a blogger post or page by using HTML and CSS.

What is an accordion in web design? 

In web design, an accordion is a type of menu that displays a list of headers stacked on top of one another. When clicked on (or triggered by a keyboard interaction or screen reader), these headers will either reveal or hide associated content.

By adding this code in your post or page will not affect your web page speed, so you can use this code freely.

How to Add Stylish Accordion In Blogger Post Or Page

Read the bellow provided steps carefully to get a clear understanding on how to add a stylish accordion in your blogger post or page easily without any error.

These are the steps to add a stylish accordion to your blogger post or page.

Step 1 - You will have to login to your blogger website dashboard by using your login details.

How to Add Stylish Accordion In Blogger Post Or Page

Step 2 - Go to your blogger website dashboard -> Click on Theme Section -> Click on arrow icon -> Click on backup -> Click on download theme.

How to Add Stylish Accordion In Blogger Post Or Page

Step 3 - Go to your blogger website dashboard -> Click on Theme Section -> Click on arrow icon -> Click on Edit HTML -> Blogger Theme Editor.

How to Add Stylish Accordion In Blogger Post Or Page

Step 4 - Copy the bellow provided CSS Code and paste it 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>

Step 5 - Click on Save Button.

Step 6 - Now open the blog post or page where you want to put your stylish accordion 

Step 7 - Copy the bellow provided HTML Code and paste it where you want the accordion to appear.

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

Step 8 - You need to write your content inside the summary and paragraph tag in HTML Code and can any so many accordions by just copying and pasting the accordion code in your blog post or page.

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

Step 10 - Now you have succesfully added your stylish accordion to your post or page.