Ralph’s son Henry

This is a script I wrote a while back and wanted to share. The idea is to make frequently ask question (faq) pages easier to browse by toggling the visibility of the answers.  The solution is unobtrusive and fails quietly if the user doesn’t have javascript enabled.

Example:

Test 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Test 2

Lorem excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Test 3

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 
Source: 

var faq = {
   init: function() {
    var dt = YAHOO.util.Dom.getElementsBy( function( el ) {
      return ( YAHOO.util.Dom.hasClass( el.parentNode, 'fancy-faq' ) );
    }, 'dt' );
    for(var i = 0; dt.length > i; i++) {
      new FancyFaq( dt[i] );
    }
  }
}
function FancyFaq( el ) {
  var sibling = YAHOO.util.Dom.getNextSibling( el );
  YAHOO.util.Dom.setStyle( sibling , 'display', 'none' );
  YAHOO.util.Event.on( el, 'click', this.toggle );
}
FancyFaq.prototype = {
  toggle: function() {
    var nextSibiling = YAHOO.util.Dom.getNextSibling( this );
    nextSibiling.style.display = (
      nextSibiling.style.display == 'block'
    ) ? 'none' : 'block';
  }
}
YAHOO.util.Event.on( window, 'load', faq.init );

Download here Includes fancy_faq,js, yahoo-dom-event.js, demo.html and a ReadMe file. Comments / suggestions welcome.

This entry was posted on Friday, November 7th, 2008 at 2:31 pm and is filed under Javascript, LinkedIn, yui. 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.