How to Create Expandable FAQ Page For Blog?

FAQ stands for "frequently asked questions." As the name implies, it is a type of web page (or group of web pages/blog) that lists questions frequently asked by users, usually about different aspects of the blog or its services. The answers are typically shown with the questions. FAQ pages aim to make finding answers easy for users. The ideal FAQ page helps people use the blog without the need for outside assistance. In this post im going to explain about a most interesting topic "Adding Expandable FAQ Page to blogger". If you are providing  some service from your blog, FAQ page will do really helpful work. Lets start the steps to Create A Expandable FAQ(Frequently Asked Questions) Page.

Want Demo?

I know you are surprising, how it will look like. Don't worry i have created a Demo of Expandable FAQ Page, you can see it live HERE.

STEP ONE

First of all, you have to add some CSS code to your blog. To add these CSS code into your blog,

• Go To Blogger > Template > Edit HTML > Search for ]]></b:skin>
• Just above  ]]></b:skin>  paste following Css code :

/*Expandable FAQ Page only @ Pokharatech.com*/
.faq-section{
    margin: 40px 0;
        position: relative;
}
.faq-section p{
    display: none;
}   
.faq-section input{
    position: absolute;
    z-index: 2;
    cursor: pointer;
    opacity: 0;           
    display: none\9; /* IE8 and below */
    margin: 0;           
    width: 100%;
    height: 36px;
}
.faq-section label+p{
    display: block;   
    color: #999;
    font-size: .85em;
    transition: all .15s ease-out;
    /* Clipping text */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;                       
}
.faq-section input[type=checkbox]:checked~p{
    display: block;
    color: #444;
    font-size: 1em;
    /* restore clipping defaults */
    text-overflow: clip;
    white-space: normal;
    overflow: visible;   
}
.faq-section label{
    font-size: 1.2em;
    background: #eee;
    display: block;
    position: relative;
        height: 20px;
    padding: 7px 10px;
    font-weight: bold;
    border: 1px solid #ddd;
    border-left: 3px solid #888;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    transition: all .15s ease-out;           
}
.faq-section label::selection{
    background: none;
}
.faq-section label:hover{
    background: #f5f5f5;
}
.faq-section input[type=checkbox]:checked~label{
    border-color: #ff7f50;           
    background: #f5deb4;
    background-image: linear-gradient(to bottom, #fff, #f5deb4);
    box-shadow: 0 0 1px rgba(0,0,0,.4);               
}
.faq-section label::before{
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    margin-top: -6px;
    border: 6px solid transparent;
    border-left-color: inherit;   
}
.faq-section input[type=checkbox]:checked~label::before{
    border: 6px solid transparent;
    border-top-color: inherit;
    margin-top: -3px;
    right: 10px;   
}
/*Expandable FAQ Page only @ Pokharatech.com*/  

STEP TWO

Now you have to create a Page in your blog, to create a page,

• Click on  Pages.
• Then click on New Page and Blank Page
• Now Insert the title FAQ and Paste these Given Code In HTML mode.

<section class="faq-section">
    <input type="checkbox" id="q1">
    <label for="q1">Question?</label>          
    <p>... The intro paragraph that will be clipped ...</p>
    <p>... Extra and optional paragraph ...</p>  
</section>

Costomization

Simply change Question? With your Question and Write answer instead of highlighted text . If you want to add more than one question copy and paste the above code again and again.

From The Editors Desk

If you are blogging and providing some service like Logo Design, blog design and many more, this kind of FAQ page will sure help your visitor and Costumer. They can get answer of they think about your service. I have made the script normal using some css tricks. If you face any problem during these steps feel free to write in comment below.Peace,  Happy Blogging.