AJAX-ify the FAQ-Tastic WordPress Plugin

If you came here looking for the plugin click here.

Update: This plugin has been tested with the new FAQ-Tastic Lite plugin and works as expected.

FAQ-Tastic is a wonderful WordPress plugin for maintaining a FAQ on your website. My company recently made a decision for one of its products to run both the blog and FAQ for the product off of WordPress. Using FAQ-Tastic will enable the folks in charge of the FAQ to make changes without having to modify any code.

While the developers of FAQ-Tastic apparently went to great lengths to add AJAX effects to the admin area for this plugin the actual display in the post or page is rather boring in the fact that it does not include any AJAX and simply displays the answer directly under the question. You can additionally list all of the questions which will link to the question and answer lower in the page but that keeps the users scrolling up and down the page. The authors of FAQ-Tastic list in their FAQ that they are planning on AJAXifying the plugin at some future time, but we don’t have time to wait for them to do it.

A simple solution would be to add a small amount of Javascript and CSS code to collapse the answers and only display them once the question has been clicked.

There is one caveat though…Ratings do not collapse with the answer, which causes them to not display correctly, and thus have been hidden using CSS in this plugin.

Now for instructions on implementing it

1. Open header.php from your WordPress theme in your favorite text editor or the WordPress theme editor.
2. Add the following code just above the line reading <?php wp_head(); ?>

   <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-includes/js/jquery/jquery.js"></script>
   <script type="text/javascript">
   	wp_faq = {
   		init : function() {
   			jQuery('ol.faq .answer').hide();
   			jQuery('ol.faq h3').click(function() {
   				wp_faq.toggle(this)
   			});
   		},
   		toggle : function(elt) {
   			jQuery(elt).toggleClass('active');
   			jQuery(elt).siblings('.answer').slideToggle('normal');
   		}
   	}
   	jQuery(function() {
   		wp_faq.init();
   		jQuery('ol.faq li').removeClass('alt');
   	});
   </script>

3. Add the following code just after the line reading <?php wp_head(); ?>:

   <style type="text/css">
   	ol.faq {
   		list-style: none;
   	}
   	ol.faq li {
   		list-style: none;
   	}
   	ol.faq li:hover {
   		background-color: transparent;
   		background-image: none;
   	}
   	ol.faq h3 {
   		padding-bottom: 5px;
   		cursor:  pointer;
   	}
   	ol.faq div.answer {
   		display: none;
   		padding-left: 30px;
   	}
   	ol.faq div.answer p {
   		font-size: 75%;
   	}
   	ol.faq div.faq_approve {
   		display: none;
   	}
   </style>

4. You can add some additional styling by adding a open/close indicator next to the question by adding the following into the css styles listed in step 3.

   ol.faq h3 {
   	padding-left:20px;
   	background: url(/wp-content/themes/YOURTHEME/images/open.gif) top left no-repeat;
   }
   ol.faq h3.active {
   	background: url(/wp-content/themes/YOURTHEME/images/close.gif) top left no-repeat;
   }

   You can download these sample open/close images here

   These gif images should be extracted/uploaded to ‘wp-content/themes/YOURTHEME/images’

And now that you are saying I’m not going to do this because it is too complicated…Don’t worry I have also written a plugin with the information I have provided above that will automatically implement this just by activating the plugin.

The plugin can be downloaded from WordPress.org repository.

Instructions on using the plugin

1. Download the plugin from here
2. Upload the ajaxify-faqtastic directory to wp-content/plugins/
3. Open the admin section of Wordpress, click on Plugins and then Activate this plugin.
4. Simple as that…you are done.

If you don’t want to go through subscribing to a mailing list to get the FAQ-Tastic plugin, download using the following links:
Plugin
Manual

FAQ

1. Rating: +0

   

   Why is this plugin called AJAXify FAQ-Tastic when it doesn't actually use AJAX?

   The name was chosen more for marketability than for the technologies actually used. I have found that people have a misconception about what AJAX is and have determined that most people looking to add Javascript effects would refer to it as AJAX.

2. Rating: -1

   

   What technologies is this plugin based off of?

   The plugin actually uses a combination of Javascript (jQuery) and CSS to achieve the result of expanding and collapsing the Q&A.

0.3 (2008-08-12):

• Updated for WordPress 2.6 compatibility

0.2 (2008-03-26):

• Initial Public Release

Download
AJAXify FAQTastic version 0.3
Archived Versions

Wednesday, March 26th, 2008 at 1:29 pm and is filed under HowTo, Plugins, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. You can  Print This Post