Sidebar Code

[Alisha]

<style>
           #sidebar {
               background: #f7f7f7;
               float:left;
               height:100%;
               position:fixed;
               top: 31px;
               left:0px;
               z-index:9999;
               width:250px;
               background-image: url();
               background-position: bottom center;
               background-repeat: no-repeat;
               text-align: justify;
           }
           
           .clickable1 {
               display:inline;
               border-bottom:0px;
               margin-right:10px;
               cursor:pointer;
               background-color: #000;
           }
           .tab-content {
               background-color: #TABBED CONTENT BACKGROUND HEX COLOR;
               display: none; /* do not remove this */
           }
           #tab1-content { display: block; } /* do not remove this */
           
           .highlight {
               background-color: #TAB HIGHLIGHT HEX;
           }
           
           #tab-strip {
               list-style: none outside none;
               margin:0px;
               padding:0px;
               display:block;
               background-color:#TAB STRIP HEX COLOR;
           }
           #tab-strip a { text-decoration: none; }
           
           #wrapper {margin-left:300px;}
       </style>
       
       <script type='text/javascript'>
           /* code written by kismet of RPG-Directory.com */
           $(function(){ function selectTab(tab){ var i=1; while($('#tab'+i).length){ if(tab.attr('id')!=='tab'+i){ $('#tab'+i).removeClass('highlight'); $('#tab'+i+'-content').hide(); } else { tab.addClass('highlight'); $('#tab'+i+'-content').show(); } i++; }} $('#tab1').addClass('highlight'); $('.clickable1').each(function(){ $(this).click(function(){ selectTab($(this)); });});});
       </script>
       
       <div id="sidebar">
           <div align="center">
               <ul id='tab-strip'>
                   <li id='tab1' class='clickable1'>TAB 1</li>
                   <li id='tab2' class='clickable1'>TAB 2</li>
                   <li id='tab3' class='clickable1'>TAB 3</li>
               </ul>
           </div>
           <div id='tab1-content' class='tab-content'>Oh hey it's the first tab.</div>
           <div id='tab2-content' class='tab-content'>Oh hey it's the second tab.</div>
           <div id='tab3-content' class='tab-content'>Oh hey it's the third tab.</div>
       </div>