How to Add FAQs Accordion in Blogger Blog

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.

~~Table of Content (toc)~~

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>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

Search ]]></b:skin> tag and Put the following CSS code just above ]]></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;
        }

Now Search </body> tag and Paste the following JAVASCRIPT code just above </body> tag.

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

Now create a New Posts and 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)

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.