Tuesday , December 12 2017
Home >> All tutorial >> How to create fancy FAQ page in Magento?

How to create fancy FAQ page in Magento?

Today, Magento Tutorial will show you the way to create fancy FAQ page with expandable/collapsible feature in an easier approach. In fact, creating a fancy magento FAQ pagesection can be easily achieved in Magento by using CMS page & jQuery.

Go to Admin > CMS Pages > Add New Page and implement the following steps:

Step 1: Add FAQ contents
Add the following content in the ‘Content’ > ‘Content’ section of CMS page:

  1. <div class=“expand_wrapper”>
  2.     <h2 class=“expand_heading”><a href=“#”>1. WordPress Theme Development</a></h2>
  3.     <div class=“toggle_container”>
  4.         <div class=“box”>
  5.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  6.         </div>
  7.     </div>
  8.     <h2 class=“expand_heading”><a href=“#”>2. Magento Ecommerce</a></h2>
  9.     <div class=“toggle_container”>
  10.         <div class=“box”>
  11.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  12.             <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  13.         </div>
  14.     </div>
  15.     <h2 class=“expand_heading”><a href=“#”>3. Website Development</a></h2>
  16.     <div class=“toggle_container”>
  17.         <div class=“box”>
  18.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  19.             <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  20.         </div>
  21.     </div>
  22.     <h2 class=“expand_heading”><a href=“#”>4. PHP MySql Development</a></h2>
  23.     <div class=“toggle_container”>
  24.         <div class=“box”>
  25.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  26.             <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  27.         </div>
  28.     </div>
  29. </div>
 
Step 2: Inject jQuery code
Add the following xml code in ‘Design’ > ‘Layout Update XML’ field of CMS page:
  1. <reference name=“head”>
  2.     <block type=“core/text” name=“google.cdn.jquery”>
  3.         <action method=“setText”>
  4.             <text><![CDATA[
  5. <script type=“text/javascript” src=“https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
  6. <script type=“text/javascript”>jQuery.noConflict();</script>
  7. <script type=“text/javascript”>
  8.     jQuery(document).ready(function(){
  9.         jQuery(“.toggle_container”).slice(1).hide();//expands first FAQ content
  10.         jQuery(“.expand_heading:first”).addClass(“active”);//add active class to first FAQ title
  11.         jQuery(“h2.expand_heading”).click(function(event){
  12.             event.preventDefault()
  13.             jQuery(this).toggleClass(“active”);
  14.             jQuery(this).next(“.toggle_container”).slideToggle(“slow”);
  15.         });
  16.     });
  17. </script>
  18.  
  19.             ]]></text>
  20.         </action>
  21.     </block>
  22. </reference>
 
Step 3: Finished
Go to the frontend and open the FAQ page, you will see as:
 
 Good luck!
 

You may also try this Magento FAQ extension to generate a professional looking FAQ page magento faq extensionhttp://www.magestore.com/magento-faq-extension.html

We also contribute great content of Magento Download for FREE (all versions)

DON'T MISS THE CHANCE!

magento download

About Champ

3 comments

  1. Thanks for posting. This is exactly what I was looking for. I tried this for my website, but am getting an error message saying ‘xml data is invalid’. Grateful for any suggestions.

  2. Hi,
    I am using magento CE version 1.7.0.2.When i pasted the xml into the “Layout update xm” ,it gives me “XML data invalid”.Any idea???

Leave a Reply

Your email address will not be published. Required fields are marked *

Heap | Mobile and Web Analytics