How To Add FAQ Accordion Section in Blogger And Wordpress Website 2023
In This Posts, How To create FAQ Page ( Frequently Ask Question) By Using Accordion Section in Blogger And Wordpress Website. Build vertically collapsing accordion in combination with collapse using HTML and CSS.
What Is Accordion?
Accordion style menus expand and collapse when a user clicks a button line. It's a great way to not have to show all the info about a topic up front page, and instead give your visitors the option to show only what they need.
Accordion is a single-page document with multiple sections, used as a Frequently Asked Question (FAQ) page. Where a title is displayed on each layer and the rest are hidden. It's useful for displaying large chunks of information in a compact space, or for dealing with very long questions where the Accordion FAQ is useful for the rest.
Benefits Of Blogger Accordion Section
Blogger Faq Accordion sections are useful for almost any type of long form content, including tutorials, guides, and (Frequently Ask Question) FAQs. Blogger FAQ Accordion is helpful to determine a FAQs schema in blogger website. Its mostly for blogger is that it helps your website visitors to find what they are looking for in less time with your Frequently Ask Question ( FAQ) Page.
Visitors easily can reduce purchasing anxieties by offering deeper explanations for your products or services or any qesion answer that your product page might be professional looking. Accordion Section in Blogger And Wordpress Website also improve SEO result in search console and site navigation through internal link build. They also give your customer support a break by giving people a one-stop shop to answer their questions.
This tutorial will help you through the process to create a Faq section with Blogger or FAQ Accordion Section in Blogger And Wordpress Website Post, You can use or customize this on your own blogger website. Its support any types blogger templates and wordpress theme.
How To Add FAQ Accordion in Blogger And Wordpress Post?
Adding FAQ Accordion Section On Your Wordpress Or Blogger Website. You need to just paste blew code and replace your Accordion text what do you want.
HTML Code :
html
<!--[ Accordion by pixabin ]-->
<div class='arn'>
<!--[ Accordion 1 ]-->
<div class='ac'>
<div class='GGArdn'>
<input class='Accordion1' id='offaccor1' name='accordion-1' type='checkbox'/>
<label class='acTtl' for='offaccor1'>
<i class='acIcn'></i>
<!--[ Accordion Title ]-->
<span>Accordion-Title-1</span>
</label>
<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>
<!--[ Accordion 2 ]-->
<div class='ac'>
<div class='GGArdn'>
<input class='Accordion1' id='offaccor2' name='accordion-2' type='checkbox'/>
<label class='acTtl' for='offaccor2'>
<i class='acIcn'></i>
<!--[ Accordion Title ]-->
<span>Accordion-Title-2</span>
</label>
<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>
<!--[ Accordion 3 ]-->
<div class='ac'>
<div class='GGArdn'>
<input class='Accordion1' id='offaccor3' name='accordion-3' type='checkbox'/>
<label class='acTtl' for='offaccor3'>
<i class='acIcn'></i>
<!--[ Accordion Title ]-->
<span>Accordion-Title-3</span>
</label>
<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>
<!--[ Accordion 4 ]-->
<div class='ac'>
<div class='GGArdn'>
<input class='Accordion1' id='offaccor4' name='accordion-4' type='checkbox'/>
<label class='acTtl' for='offaccor4'>
<i class='acIcn'></i>
<!--[ Accordion Title ]-->
<span>Accordion-Title-4</span>
</label>
<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>
</div>
CSS Code :
css
<style>
/* Accordion by GGTemplates */
.arn{position:relative;list-style:none;margin:30px 0;padding:0;font-size:14px;line-height:1.7em;font-family:inherit}
.arn .ac{width:100%;padding:20px 0 20px 15px;margin:10px 0;background:#f0f0ff;border-radius:10px;border-left:4px solid #8a8aff;box-shadow:0 5px 10px rgba(51,51,51,.1)}
.arn .ac:nth-child(4n + 1){background:#f0f0ff;border-left-color:#8a8aff}
.arn .ac:nth-child(4n + 2){background:#fff0f3;border-left-color:#ff8aa1}
.arn .ac:nth-child(4n + 3){background:#f0faff;border-left-color:#8ad8ff}
.arn .ac:nth-child(4n + 4){background:#fff7f0;border-left-color:#ffc08a}
.arn .cont{margin:0;padding-left:27px;padding-right:27px;position:relative;overflow:hidden;max-height:0;transition:all .3s ease;color:#08102b}
.arn .cont ul, .arn .cont ol{padding-left:13px}
.arn .cont li{padding:0}
.arn .cont a{text-decoration:none;color:#08102b}
.arn .cont a:hover{text-decoration:underline}
.arn p:first-child{margin-top:0}
.arn p:last-child{margin-bottom:0}
.acTtl{display:flex;align-items:center;font-weight:700;color:#08102b}
.acTtl span{display:flex;flex-grow:1}
.acTtl span:before{content:'';padding-left:15px}
.acIcn{flex-shrink:0;display:flex;align-items:center;width:12px;height:12px;position:relative}
.acIcn:before, .acIcn:after{content:'';display:block;width:100%;height:2px;border-radius:2px;background:#08102b}
.acIcn:after{position:absolute;transform:rotate(90deg)}
.Accordion1{display:none}
.Accordion1:checked ~ .acTtl .acIcn:after{visibility:hidden;opacity:0}
.Accordion1:checked ~ .cont{max-height:100vh;padding-top:15px;padding-bottom:8px}
.darkMode .arn .ac{background:#252526;border-left-color:#4c4c4e}
.darkMode .arn .cont, .darkMode .arn .cont a, .darkMode .acTtl, .darkMode .Accordion1:checked ~ .acTtl{color:#fefefe}
.darkMode .acTtl .acIcn:before, .darkMode .acTtl .acIcn:after, .darkMode .Accordion1:checked ~ .acTtl .acIcn:before, .darkMode .Accordion1:checked ~ .acTtl .acIcn:after{background:#fefefe}
</style>
Demo
...
...
...
...
You Need To Modification:
- If you want any color or any modifications to edit the CSS codes
- Add Your Heading on the <!--[ Accordion Title ]--> <span>Accordion-Title-4</span> Highlighted text.
- Add Contents below on the <div class='cont'> Section.
Conclusion: If read the full post, You can easily create FAQ Accordion Section in Blogger And Wordpress Website. If you facing any error by using HTML and CSS Code, please contact with us or Comment blew on this post.
