Vanilla Accordion - jQuery plugin

readme.txt

I did not include this in the plugin code:

$(document).ready(function()
{

  /* Plugin code goes here */

});

So that you could choose yourselfs to include or not.

examples_file_vanilla_accordion.html

<script type="text/javascript">
/*
 
  NOTE:
  This is only an example of how to call the plugin.
  Not a ready-to-go example.

  Create a test config object to pass to our plugin.
  we set the startOpen setting to null so no div is
  open at start.
*/
myCfg = {
  speed: 1000,
  easing: 'easeOutBounce',
  startOpen: ''
};

/*
  Note: that we specify a new name for our 
  content divs in the second accordion.
*/
myCfg2 = {
  startOpen: 1, /* This will make the second content div always open at page load for this accordion */
  speed: 600,
  contentElement: '.contentDiv2',
  headerElement: '.acHeader2',
  openClass: 'acHeaderOpenPink', /* note that we dont use the . before the class name. */
  fadeContent: true /* a bolean for setting if we want the content to fade. */
};

/* call the plugin with our config objects */
$('.container').vanillaAccordion(myCfg);
$('.container2').vanillaAccordion(myCfg2);

</script>

vanilla_accordion-1.1.js

/* Start anonymous selfexecuting function */
(function($, window, document, undefined)
{

  /* begin plugin envelop */
  $.fn.vanillaAccordion = function(usrConfig)
  {
    /*
    Vanilla Accordion v1.1
    Author: Magnus Bonnevier.
    www.magnusbonnevier.se

    Code is free to use for good not evil.
    And please keep the author info, but not required.

    # CHANGELOG #
    2012-03-13 : First Gist version online.
          
    */

    /*
     config object with default settings

     note: 'swing', 'linear' are the two bultin easing
     methods for jQuery. if you want others, use a plugin
     or jQuery UI.

     the container to hold the headers and content elements
     we get trough the 'this' keyword via $('selector').vanillaAccordion();
     were selector is whatever DOM selector that jquery supports.
    
    */

    $.fn.vanillaAccordion.config = {
      speed: 500,
      easing: 'swing',
      startOpen: 0,
      contentElement: '.contentDiv',
      headerElement: '.acHeader',
      openClass: 'acHeaderOpen',
      fadeContent: false
    };

    /* extend or overide the config object as needed by user config object */
    var config = $.extend({}, $.fn.vanillaAccordion.config, usrConfig);

    /* begin chainability */
    return this.each(function(){
      
      /* Do some inital things so everything works as intended */
      $(config.contentElement).hide();

      /* if the startOpen settings is left out do not open any content at start */
      if(!config.startOpen == '')
      {
        $(config.contentElement).eq(config.startOpen).show().prev().addClass(config.openClass);
      }

      /* The handler that makes the accordion open close */
      $(this).on('click.vanillaAccordion', config.headerElement,function(e)
      {

        /* save the object for the clicked header */
        var $clickHeader = $(this);
        
        /* save the object for the clicked headers next content div */
        var $clickTarget = $(this).next();

        /*
          iterate through the content divs and open the one 
          directly under the clicked header and close the 
          other open ones.
        */
        $(config.contentElement).each(function(index)
        {
          /* the object for the current iteration */
          var $current = $(this);

          /*
            detect wether the current iteration
            is equal to the clicked object.
            And open the selected one and close
            the others.
          */
          if($current.is($clickTarget))
          {

            $current.slideDown(config.speed, config.easing);

              /* do some fading on the content div or not depending on settings */
              if(config.fadeContent == true)
              {
                $current.animate({'opacity':'1.0'}, {queue: false, duration: config.speed, easing: config.easing});
              }
                          
            /* give the clicked header a class to mark it. */
            if(!$current.prev().hasClass(config.openClass))
            {
              $current.prev().addClass(config.openClass);
            }

          } else {

            $current.slideUp(config.speed, config.easing);

              /* do some fading on the content div or not depending on settings */
              if(config.fadeContent == true)
              {
                $current.animate({'opacity':'0.0'}, {queue: false, duration: config.speed, easing: config.easing});
              }
            
            /*
              if the other headers that is not
              clicked has the marker class then remove it.
            */
            if($current.prev().hasClass(config.openClass))
            {
              $current.prev().removeClass(config.openClass);
            }

          }

        }); /* end each loop */

        /*
          this supress the hyperlinks default
          action to go to the url on click event.
        */
        e.preventDefault();
      }); /* end click handler */

    });/* end chainability */

  } /* end plugin envelop */

})(jQuery, window, document);
/*
  end anonymous selfexecuting function and closure.
  this way we isolate our vars from the global object.
*/