How to Add FAQ Widget in Weebly?

FAQ and accordion are similar types of content having multiple sections in a single element. Each section contains a heading and body to add details. 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.

Weebly FAQ Widget

There are 2 ways you can add FAQ widget in Weebly.

• Using Weebly FAQ app
• Insert custom FAQ widget

Both methods have their own advantages as well as disadvantages. You can use the FAQ widget for adding Q&A section on a single page or create a dedicated FAQ page.

1. Weebly FAQ App

Weebly offers a free FAQ app through it’s app center.

• Login to your Weebly account and go to site editor of the site you want to add FAQ.
• Go to the “Apps” tab to navigate to the app center.
• Search for “FAQ” and find the Weebly FAQ app.
• Click on the app to view details and click on “Add” button to connect the app to your site.

• Confirm the prompt by clicking on the “Connect” option.

• You will see a success message like below, once the FAQ app is successfully installed on your site.

Now, go to “Build” tab and scroll down to see the FAQ app is available under “Installed Apps” section on the left sidebar. Drag and drop the element to insert a FAQ on your page.

The app will add three dummy questions and answers as FAQ. You can click on the element to see the available options. You can do the followings with default Weebly 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

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

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

2. 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 which is much better than Weebly’s FAQ app.

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

2.1. Script for FAQ Widget

Add the following script under the “Footer Code” section of your Weebly page. You can add this either on single page under “Pages > Select Your Page > SEO Settings > Footer Code”.

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

2.2. CSS for FAQ Widget

Add the below CSS under “Pages > Select Your Page > SEO Settings > 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>

2.3. 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. You can customize the FAQ offline by rearranging the questions, changing the colors and adjusting font size.

Note: The FAQ code may conflict with other codes on your site. Hence, we recommend to add the code on page level instead of the site level under “Settings > SEO > Header/Footer Code” section. In addition, use one FAQ on a page, otherwise you may need to change the CSS class names to avoid mess up the styles.