Alaa Attya's Tech blog

Vertical Accordion jQuery plugin

  • Mar 07, 2012

while developing a website i face a problem that i need a side bar that need some way of tabs the requires viewing sub links when clicking on each tab,

so i have searched more and more i’ve also tried jQuery ordinary accordion but all in vain.

while googling i’ve found a jQuery plug which worked for it as magic 😀

it’s called v-accordion

so guys let’s stop talking and start coding,

this plugin requires some piece of html structure as u’ll see.

All you need to do is to put all your tabs in one div which will be passed to jQuery to get the work done. Then you’ll have a slice for each tab. while coding actually you’ll have some problem that the plug will not work at the first, so here’s the solution.

The name of each slice must match as follows “va-slice va-slice-1” and give each slice a number, then all the job u’ll be okay.

here’s a simple html structure that may help.

<html>
    <head>
        <title>Vertical Accrodion</title>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="jquery.vaccordion.js"></script>
        <script type="text/javascript" src="jquery.mousewheel.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
        <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&v2' rel='stylesheet' type='text/css'>
        <script type="text/javascript">
            $(function(){
                $("#content").vaccordion({
                    visibleSlices   : 3,
                    expandedHeight  : 250,
                    animOpacity     : 0.1,
                    contentAnimSpeed: 100
                });
            });
        </script>
        <style>
            #fst{
                height: 100px;
                width: 100px;
                background-color: red;
            }
 
            #snd{
                height: 100px;
                width: 100px;
                background-color:green;
            }
 
            #trd{
                height: 100px;
                width: 100px;
                background-color: black;
            }
        </style>
 
    </head>
    <body>
        <div id="content">
            <div class="va-slice va-slice-1">
                First tab
            </div>
            <div class="va-slice va-slice-2">
                Second tab
            </div>
 
            <div class="va-slice va-slice-3">
                Third tab
            </div>
        </div>
    </body>
</html>

as you can see the .vaccordion has many option that may help you,
Finally there’s three files needed to get the job done
1-jquery.vaccordion.js
2-jquery.mousewheel.js
3-jquery.easing.1.3.js

here the download link for these files
http://www.mediafire.com/?nbnayybznxya81m

hope you enjoyed 🙂</pre>