How to Add FAQs Accordion in Blogger Posts in 2021 [Update]

Here we are going to tell you how to create an accordion in blogger as per our experience this is the easiest way to create one for your blog in 2021.

An accordion is a single-page document that contains multiple sections, where at each level one of the sections is displayed and all the others are hidden. This is useful for displaying large chunks of information in compact spaces or for dealing with the very long questions where you need to show only the first half of the question text alongside an "open more" link for the remainder.

Faq Accordion sections are useful for almost any type of long-form content, including tutorials, guides, and FAQs. This tutorial will walk you through the process to create a Faq section with Blogger. You can use it as is or customize this on your own blog.

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.

So Let's Start a Posts

How to Create Faq Accordion in blogger in 2021

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

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> to </head> tag

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
Step4) Now Search ]]></b:skin> tag & Put this CSS code  before ]]></b:skin> tag.

.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;
        }
Step5) Now Search </body> tag & Paste this JAVASCRIPT code before </body> tag.

<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>
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>
Congratulations! You've successfully added a Faq Accordion to your Blogger posts.

DEMO: FAQs (Frequently Asked Questions)

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.

Link to Join Telegram Group: Blog Triggers Discussion Group