FAQs are a way of life. Your site might have 5 FAQ entries or it might have 500. Either way, if a customer comes to your store with a question about your products or services, they need to find an answer.
Read on if you have a handful of FAQ entries to deal with. I'll show you how to make a cool FAQ page in your Miva Merchant store , quickly and easily. If your store has a lot of FAQ entries consider using a FAQ module that makes it easy to manage all the entries, such as our own Scot's FAQ Manager - Miva Merchant FAQ Module .
There is a demo FAQ list at the bottom of this post.
Step 1
Make a list of your FAQ entries. Order doesn't matter - once they are on the page you can copy/paste to reorder.
Step 2
Add the following script entry to your page. This needs to be added after jQuery, so to be safe, add it just above the closing body tag (
<script type="text/javascript">
$(document).ready(function($) {
$('#faq').find('.faq-title').click(function(){
// customize the FAQ open speed by putting 'slow', 'fast', or the number of milliseconds
$(this).next().slideToggle('fast');
// uncomment the line below to close a FAQ while the new one opens.
// $(".faq-content").not($(this).next()).slideUp('fast');
});
});
</script>
Step 3
Add the following stylesheet tag just above the closing head tag (
<style>
.faq-title {cursor: pointer;}
.faq-content { display: none; padding-left: 10px; font-size: .85em; }
.faq-content.open {display: block;}
</style>
Step 4
All that's left is to add your FAQ entries to the content area of your page.
<div id="faq">
<h4 class="faq-title">FAQ Title 1</h4>
<div class="faq-content open">
<p>Content for FAQ 1 goes here.</p>
</div>
<h4 class="faq-title">FAQ Title 2</h4>
<div class="faq-content">
<p>Content for FAQ 2 goes here.</p>
</div>
</div>
You can see how easy it is to add new FAQ entries- the title goes in an H4 tag and the FAQ content is in a div container. The whole thing is wrapped in a div container with the id set to faq .
Tip: if you add the open class to the div, that FAQ entry will start open. Sometimes you'll have a general overview FAQ entry and that would be a good one to start with. You can add the open class to any number of FAQ entries if you want them to start open.
What I'd do to make the job faster is copy the basic framework first. No FAQ entries, just the blank HTML.
<div id="faq">
<h4 class="faq-title"></h4>
<div class="faq-content default">
<p></p>
</div>
</div>
When you have that copied in the page, create as many copies of the FAQ entry section as you need. Then all you have to do is cut and paste your FAQ data into the right spots.
<div id="faq">
<h4 class="faq-title">Overview</h4>
<div class="faq-content open">
<p>Some kind of overview FAQ information.</p>
</div>
<h4 class="faq-title"></h4>
<div class="faq-content">
<p></p>
</div>
<h4 class="faq-title"></h4>
<div class="faq-content">
<p></p>
</div>
<h4 class="faq-title"></h4>
<div class="faq-content">
<p></p>
</div>
</div>
Demo: click on an entry to open/close
Who had the best quote from Calvin and Hobbes?
Hobbes: "Until you stalk and overrun, you can not devour anyone."
How Tall is Mt. Baker?
Mt. Baker is 10,781′ tall.
What is a good philosophy?
Be open to all outcomes but attached to none.
Bonus: Microdata your FAQ page for better SEO
All of us need to use microdata in our websites. It helps search engines find exactly what they need to index your pages and help your search results. FAQ pages are no different and Schema.org (all major search engines read schema.org microdata) has microdata custom tailored for FAQ questions.
<div id="faq" class="well">
<div itemscope="" itemtype="http://schema.org/Question">
<h4 class="faq-title" itemprop="name">Who had the best quote from Calvin and Hobbes?</h4>
<div class="faq-content open" itemprop="suggestedAnswer acceptedAnswer" itemscope="" itemtype="http://schema.org/Answer">
<div itemprop="text">
<p>Hobbes: "Until you stalk and overrun, you can not devour anyone."</p>
</div>
</div>
</div>
<div itemscope="" itemtype="http://schema.org/Question">
<h4 class="faq-title" itemprop="name">How Tall is Mt. Baker?</h4>
<div class="faq-content" itemprop="suggestedAnswer acceptedAnswer" itemscope="" itemtype="http://schema.org/Answer">
<div itemprop="text">
<p>Mt. Baker is 10,781′ tall.</p>
<img class="thumbnail text-center" src="http://www.east542.com/media/logo_2010.jpg" width="100%">
</div>
</div>
</div>
<div itemscope="" itemtype="http://schema.org/Question">
<h4 class="faq-title" itemprop="name">What is a good philosophy?</h4>
<div class="faq-content" itemprop="suggestedAnswer acceptedAnswer" itemscope="" itemtype="http://schema.org/Answer">
<div itemprop="text">
<p>Be open to all outcomes but attached to none.</p>
</div>
</div>
</div>
</div>
