Free Q&A or FAQ Widget for Weebly

FAQ and accordion are similar types of content having multiple sections with each section having a heading and body. The only difference between these two widgets are that FAQ allows only text content while accordion allows any type of content. We have explained CSS, jQuery and Bootstrap accordion toggle containers in our previous articles. In this article let us discuss how to add FAQ widget in Weebly site. You can use the FAQ widget for adding Q&A section on any page or create a dedicated FAQ page.

Weebly FAQ App

Weebly offers a free FAQ app through it’s app center. When you are on the Weebly site editor, click on the “Add App” button and to go to app center. Search for “FAQ” app and connect to your site.

Default Weebly FAQ App
Default Weebly FAQ App

Once the FAQ app is successfully to your site, drag and drop the element and click on it. You will see the following options for the FAQ element.

Weebly FAQ App Options
Weebly FAQ App Options

You can do the followings with FAQ app:

  • Choose the number of items to be added in the Q&A section
  • Select simple, box or material style layout
  • Set the background colors for title and content
  • Customize fonts and text colors

You can add only text content for both title and answer sections. You can’t drag elements inside the FAQ element to show image or map. The final finished FAQ widget will show something like below.

Related:  Best Performing Google AdSense Ads
Weebly FAQ Example
Weebly FAQ Example

It looks simple to add FAQ widget but the biggest problem is that you can’t drag and rearrange the questions. This makes this app useless unless you have fixed question and answers which will never change. Even in that you should be carefully adding the questions in the same sequence you need, otherwise the only way is to delete and start from the beginning.

View the live demo of Weebly FAQ and Accordion apps here.

Custom FAQ Widget for Weebly

As long as the drag and drop function is not available within FAQ app, it makes sense to edit the content offline and add on the page using embed code element. Below is how the custom FAQ widget will look like and view live demo here.

Custom FAQ Widget for Weebly
Custom FAQ Widget for Weebly

The widget has three parts – script, CSS and HTML.

Script for FAQ Widget

Add the following script under the “Footer Code” section of your Weebly page.

<script>
jQuery(function() {
var $ = jQuery;
var faqTitle = $( ".faq h3" );
var answerFaq = $(".response");
faqTitle.click(function(e) {
e.preventDefault();
$(this).toggleClass('titleopen').next().slideToggle().toggleClass('open-close');
});
$( "#showall" ).click(function(e) {
e.preventDefault();
faqTitle.addClass('titleopen');
answerFaq.slideDown().addClass('open-close');
});
$( "#hideall" ).click(function(e) {
e.preventDefault();
faqTitle.removeClass('titleopen');
answerFaq.slideUp().removeClass('open-close');
});
});
</script>
CSS for FAQ Widget

Add the below CSS under “Header Code” section of your Weebly page.

<style>
.faq_container{
background: #f5f5f5;
padding: 20px;
border: 1px solid #e5e5e5;
border-radius: 10px;
}

#show_hide_wrap{
text-align: right;
}

#show_hide_wrap p{
font-size: 16px;
}

#showall, #hideall{
display: inline-block;
background: #fff;
border: 2px solid rgba(86, 77, 77, 0.18);
padding: 5px 5px;
line-height: 1.5;
margin-bottom: 20px;
font-weight: bold !important;
height: 25px;
}

#showall{
	margin-right: 20px;
}

#showall:hover, #hideall:hover{
background: #707070;
color: #fff;
}

.response{
display: none;
}

ul.faq, ul.faq li{
list-style: none !important;
}

.faq h3{
background: #fff;
padding: 10px 10px;
border: 1px solid #e5e5e5;
}

.faq h3:hover, .faq h3.titleopen{
background: #808080;
color: #fff;
}

.faq h3:after{
content: '+';
float: right
}

.faq h3.titleopen:after{
content: '-'
}

.faq_qtn{
cursor: pointer;
-webkit-transition: color .2s ease, background .2s ease;
-moz-transition: color .2s ease, background .2s ease;
-o-transition: color .2s ease, background .2s ease;
transition: color .2s ease, background .2s ease;
}

.para {
padding-top: 20px;
padding-right: 30px;
font-size: 18px;
text-align: justify;
line-height: 30px;
padding-left: 30px;
}
</style>
HTML for FAQ Widget

Add the below HTML code inside the embed code element on the page. The sample HTML code has three questions and answers, remember to replace the dummy content with your own. You can add more questions and answers just by appending additional <li>…</li> tags.

<div class="faq_container">
<div id="show_hide_wrap">
<div id="showall" class="faq_qtn">SHOW ALL</div>
<div id="hideall" class="faq_qtn">HIDE ALL</div>
</div>
<ul class="faq">
<!-- This is the first Q&A -->	
<li>
<h3 class="faq_qtn">This is a first question of FAQ Module</h3>
<div class="response">
<p class="para">Here is the answer to the first question.</p>
</div>
</li>		
<!-- This is the second Q&A -->
<li>
<h3 class="faq_qtn">Here goes your second question of FAQ Module</h3>
<div class="response">
<p class="para">Here is the answer to the second question.</p>
</div>
</li>		
<!-- This is the third Q&A -->
<li>
<h3 class="faq_qtn">Here is a third question of FAQ Module and you can add as many as questions</h3>
<div class="response">
<p class="para">Here is the answer to the third question.</p>
</div>
</li>
<!-- Add additional questions -->
</ul>
</div>

Publish your site and see the live FAQ with show all and hide all buttons.

Recommended Articles:

Leave a Comment