<< Tillbaka

Exclusive Accordion v2.0

2012-02-10 - kl 18:21:09 Postat av Magnus Bonnevier

# CHANGELOG #
2011-11-12: Updated to use the new .on() event API method.

$(document).ready(function(){

   /* Vars for performence caching */
   var cH = $('.cHolder');
   var cT = $('.toggler');

   /* some settings vars */
   var easeName = 'easeOutBack';
   var slideDur = 2000;

   /* Hide the content and load in some example text from lipsum.php with AJAX into the inner DIV */
   cH.hide(0);
   cH.find('div.lipsum').load('lipsum.php');

   /* Start with the first content holder open at page load */
   cH.first().show(0);

   /* the event handler responsible for toggling content */
   cT.on('click', function(e)
   {

      /*
         We save this object to compare later with the
         current looped toggler object further down.
      */
      var clickTargetObj = $(this);

      /* Loop through all togglers */
      cT.each(function(index, theElement)
      {

         /*
            We check to see if the current iteration $(this) object
            match with the $(this) clicked object outside our loop.
            If so, then the .is() method returns TRUE and we act upon that.
         */
         var curTargetObj = $(this);

         if(clickTargetObj.is(curTargetObj))
         {

            /*
               Use the current iteration object with the .next()
               method to find out wich content holder to toggle.
            */
            curTargetObj.next().slideToggle(slideDur, easeName);

         } else {

            /*
               If the current iteration object is not the same as the clicked toggler  we
               use the .next() method instead to hide the content holder right after it.
            */
            curTargetObj.next().slideUp(slideDur, easeName);

         }

      });

      e.preventDefault();

   });

   /* the event handler responsible for closing all open content containers */
   $('.cAll').on('click', function(e)
   {

      /*
         We use the .slideUp() method here because it will slide up all open containers.
         If we would have used the .slideToggle() method the closed ones would
         open and the open ones close and there would be chaos.
      */

      /* close all open content holders */
      if($(this).attr('title') === 'closeAll')
      {
          cH.slideUp(slideDur, easeName);
      }

      /* Open all closed content holders */
      if($(this).attr('title') === 'openAll')
      {
          cH.slideDown(slideDur, easeName);
      }
      e.preventDefault();

   });

});

Kategori: kodsnuttar jQuery

Taggar: code snippets , jQuery