title: vertical accordion from horizontal
body: <pre><code>//# jQuery - Horizontal Accordion
  //# Version 2.00.00 Alpha 1
  //#
  //# portalZINE(R) - New Media Network
  //# http://www.portalzine.de
  //#
  //# Alexander Graef
  //# portalzine@gmail.com
  //#
  //# Copyright 2007-2009
  
  (function($) {
      $.hrzAccordion = {
  
  
         setOnEvent: function(i, container, finalWidth, settings){
              $("#"+container+"Handle"+i).bind(settings.eventTrigger,function() {          
  
                          var status = $('[rel='+container+'ContainerSelected]').data('status');
  
                          if(status ==1 &amp;&amp; settings.eventWaitForAnim === true){
                           return false;  
                          }
  
                          if( $("#"+container+"Handle"+i).attr("rel") != container+"HandleSelected"){
  
                            settings.eventAction;
  
                              $('[id*='+container+'Handle]').attr("rel","");                          
  
                              $('[id*='+container+'Handle]').attr("class",settings.handleClass);
  
                              $("#"+container+"Handle"+i).addClass(settings.handleClassSelected);
  
  
                              $("."+settings.contentWrapper).css({width: finalWidth+"px" });
  
                              switch(settings.closeOpenAnimation)
                              {
                              case 1:
  
  
                          if($('[rel='+container+'ContainerSelected]').get(0)  ){
                          $('[rel='+container+'ContainerSelected]').data('status',1);
  
                              //current_width = $('[rel='+container+'ContainerSelected]').width();
  
                              $('[rel='+container+'ContainerSelected]').animate({width: "0px",opacity:"0"}, { queue:true, duration:settings.closeSpeed ,easing:settings.closeEaseAction,complete: function(){ 
  
                              $('[rel='+container+'ContainerSelected]').data('status',0);                                                                                                                                                                         } ,step: function(now){
                                                                                                                                                                                                                                      width = $(this).width();
  
                              //new_width = finalWidth- (finalWidth  * (width/current_width));
                              new_width = finalWidth - width;
                              $('#'+container+'Content'+i).width(Math.ceil(new_width)).css("opacity","1");
  
                              }});
  
                          }else{
                              $('[rel='+container+'ContainerSelected]').data('status',1);
  
                              $('#'+container+'Content'+i).animate({width: finalWidth,opacity:"1"}, { queue:false, duration:settings.closeSpeed ,easing:settings.closeEaseAction,complete: function(){
                                                                                                                                                                                                        $('[rel='+container+'ContainerSelected]').data('status',0);   
                                                                                                                                                                                                        }});
  
  
                              }
  
                              break;
                              case 2:
                                  $('[id*='+container+'Content]').css({width: "0px"});
                                  $('#'+container+'Content'+i).animate({width: finalWidth+"px",opacity:"1"}, { queue:false, duration:settings.openSpeed ,easing:settings.openEaseAction, complete: 
   settings.completeAction                                                                                                                                                                                                                                    });                     
  
                              break;
                              }
  
                              $('[id*='+container+'Content]').attr("rel","");         
                              $("#"+container+"Handle"+i).attr("rel",container+"HandleSelected");
                              $("#"+container+"Content"+i).attr("rel",container+"ContainerSelected");                 
  
  
                          }
  
                      }); 
  }
          };
  
      $.fn.extend({
  
          hrzAccordionLoop: function(options) {
              return this.each(function(a){  
  
                  var container = $(this).attr("id") || $(this).attr("class");
                  var elementCount = $('#'+container+' &gt; li, .'+container+' &gt; li').size();
                  var settings = $(this).data('settings');
  
                  variable_holder="interval"+container ;
                  var i =0;
                  var loopStatus  = "start";
  
                  variable_holder = window.setInterval(function(){                            
  
                  $("#"+container+"Handle"+i).trigger(settings.eventTrigger);
  
                  if(loopStatus =="start"){
                          i = i + 1;
                      }else{
                          i = i-1;    
                      }
  
                      if(i==elementCount &amp;&amp; loopStatus  == "start"){
                          loopStatus  = "end";
                          i=elementCount-1;
  
                      }
  
                      if(i==0 &amp;&amp; loopStatus  == "end"){
                          loopStatus  = "start";
                          i=0;
  
                      }
                                                  },settings.cycleInterval);
  
  
                  });
              },
          hrzAccordion: function(options) {
              this.settings = {
              eventTrigger            : "click",
              containerClass          : "container",
              listItemClass           : "listItem",                   
              contentContainerClass   : "contentContainer",
              contentWrapper          : "contentWrapper",
              contentInnerWrapper     : "contentInnerWrapper",
              handleClass             : "handle",
              handleClassOver         : "handleOver",
              handleClassSelected     : "handleSelected",
              handlePosition          : "right",
              handlePositionArray     : "", // left,left,right,right,right
              closeEaseAction         : "swing",
              closeSpeed              : 500,
              openEaseAction          : "swing",
              openSpeed               : 500,
              openOnLoad              : 2,
              hashPrefix              : "tab",
              eventAction             : function(){
                                      //add your own extra clickAction function here
                                      },
              completeAction          : function(){
                                      //add your own onComplete function here
                                      },
              closeOpenAnimation      : 1,// 1 - open and close at the same time / 2- close all and than open next
              cycle                   : false, // not integrated yet, will allow to cycle through tabs by interval
              cycleInterval           : 10000,
              fixedWidth              : "",
              eventWaitForAnim        : true
  
          };
  
          if(options){
              $.extend(this.settings, options);
          }
              var settings = this.settings;
  
  
  
              return this.each(function(a){           
  
                  var container = $(this).attr("id") || $(this).attr("class");            
  
                  $(this).data('settings', settings);
  
                  $(this).wrap("&lt;div class='"+settings.containerClass+"'&gt;&lt;/div&gt;");
  
                  var elementCount = $('#'+container+' &gt; li, .'+container+' &gt; li').size();
  
                  var containerWidth =  $("."+settings.containerClass).width();
  
                  var handleWidth = $("."+settings.handleClass).css("width");
  
                  handleWidth =  handleWidth.replace(/px/,"");
                  var finalWidth;
                  var handle;
  
                  if(settings.fixedWidth){
                      finalWidth = settings.fixedWidth;
                  }else{
                      finalWidth = containerWidth-(elementCount*handleWidth)-handleWidth;
                  }
  
                  $('#'+container+' &gt; li, .'+container+' &gt; li').each(function(i) {
  
                      $(this).attr('id', container+"ListItem"+i);
                      $(this).attr('class',settings.listItemClass);
                      $(this).html("&lt;div class='"+settings.contentContainerClass+"' id='"+container+"Content"+i+"'&gt;"
                                   +"&lt;div class=\""+settings.contentWrapper+"\"&gt;"
                                   +"&lt;div class=\""+settings.contentInnerWrapper+"\"&gt;"
                                   +$(this).html()
                                   +"&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;");
  
                      if($("div",this).hasClass(settings.handleClass)){
  
                      var html = $("div."+settings.handleClass,this).attr("id",""+container+"Handle"+i+"").html();
                      $("div."+settings.handleClass,this).remove();
  
                       handle = "&lt;div class=\""+settings.handleClass+"\" id='"+container+"Handle"+i+"'&gt;"+html+"&lt;/div&gt;";
                      }else{
                       handle = "&lt;div class=\""+settings.handleClass+"\" id='"+container+"Handle"+i+"'&gt;&lt;/div&gt;";
                      }
  
  
  
                      if(settings.handlePositionArray){
                          splitthis               = settings.handlePositionArray.split(",");
                          settings.handlePosition = splitthis[i];
                      }
  
                      switch(settings.handlePosition ){
                          case "left":
                          $(this).prepend( handle );
                          break;
                          case "right":   
                          $(this).append( handle );   
                          break;
                          case "top": 
                          $("."+container+"Top").append( handle );    
                          break;
                          case "bottom":  
                          $("."+container+"Bottom").append( handle ); 
                          break;
                      }                   
  
                      $("#"+container+"Handle"+i).bind("mouseover", function(){
                          $("#"+container+"Handle"+i).addClass(settings.handleClassOver);
                      });
  
                      $("#"+container+"Handle"+i).bind("mouseout", function(){
                          if( $("#"+container+"Handle"+i).attr("rel") != "selected"){
                              $("#"+container+"Handle"+i).removeClass(settings.handleClassOver);
                          }
                      });
  
  
                      $.hrzAccordion.setOnEvent(i, container, finalWidth, settings);              
  
                      if(i == elementCount-1){
                          $('#'+container+",."+container).show();                 
                      }
  
  
  
                      if(settings.openOnLoad !== false &amp;&amp; i == elementCount-1){
                              var location_hash = location.hash;
                              location_hash  = location_hash.replace("#", "");    
                              if(location_hash.search(settings.hashPrefix) != '-1' ){
                              var tab = 1;
                              location_hash  = location_hash.replace(settings.hashPrefix, "");
                              }
  
                              if(location_hash &amp;&amp; tab ==1){
                                  $("#"+container+"Handle"+(location_hash)).attr("rel",container+"HandleSelected");
                                  $("#"+container+"Content"+(location_hash)).attr("rel",container+"ContainerSelected");       
                                  $("#"+container+"Handle"+(location_hash-1)).trigger(settings.eventTrigger);
  
                              }else{
                                  $("#"+container+"Handle"+(settings.openOnLoad)).attr("rel",container+"HandleSelected");
                                  $("#"+container+"Content"+(settings.openOnLoad)).attr("rel",container+"ContainerSelected"); 
                                  $("#"+container+"Handle"+(settings.openOnLoad-1)).trigger(settings.eventTrigger);
                              }                   
                      }   
                  }); 
  
                  if(settings.cycle === true){
                      $(this).hrzAccordionLoop();
                  }
              });             
          }       
      });
  })(jQuery); 
  </code></pre>
  
  <p>**Given is the code used for the accordion...please check out this <a href="http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html" rel="nofollow">Accordion Link</a>. in the link there are four examples of accordions. I want the last accordion, i.e example 4, to be vertical.</p>