vertical accordion from horizontal
<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>
