AJAX-ify the FAQ-Tastic WordPress Plugin ...

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.

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( ormal);
              }
          }
          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;
      }

 View Full Story.