Content Tabs

[Jordan S Smith]

Alright, this has probably been asked before, but i'm trying to make some content tabs for vB4. I'm using a free-source code. (All credit for the code belongs to menucool.com)

This is what I have so far.

<style type="text/css">

ul.tabs
{
    padding: 14px 0 8px;
    margin:0;
    font-size: 0;
    list-style-type: none;
    text-align: center; /*set to left, center, or right to align the tabs as desired*/
    background: #DDDDE3;
    border:1px solid #CCC;
    border-bottom:none;
    border-radius: 2px 2px 0 0;
}
        
ul.tabs li
{
    display: inline;
    margin: 0;
    margin-right: 2px;/*distance between tabs*/
    font: normal 12px Verdana;
}
        
ul.tabs li a
{
    text-decoration: none;
    position: relative;
    z-index: 1;
    padding: 8px 22px;
    /*border: 1px solid #16BCA3;*/
    color: #000;
    border-radius: 3px 3px 0 0;
    outline:none;
}
  
        
ul.tabs li a:hover
{
    text-decoration: underline;
    color: #000;
}
        
ul.tabs li.selected a
{
    /*selected tab style */
    position: relative;
    top: 0px;
    font-weight:bold;
    background: #FFF;
    border: 1px solid #AAA;
    border-bottom: 1px solid #FFF;
    color: #000;
}
        
        
ul.tabs li.selected a:hover
{
    /*selected tab style */
    text-decoration: none;
}
        
div.tabcontent
{
    display: block;
}

div.tabcontents
{
    border: 1px solid #CCC; padding: 30px;
    border-top-color:#AAA;
    background-color:#FFF;
    border-radius: 0 0 2px 2px;

</style>

<script type="text/javascript">

var tabs=function(){var b=function(c,a){var b=new RegExp("(^| )"+a+"( |$)");return b.test(c.className)?true:false},j=function(a,c){if(!b(a,c))if(a.className=="")a.className=c;else a.className+=" "+c},h=function(a,b){var c=new RegExp("(^| )"+b+"( |$)");a.className=a.className.replace(c,"$1");a.className=a.className.replace(/ $/,"")},g=function(c,b){var a=document.getElementsByTagName("html");if(a)a[0].scrollTop+=b},e=function(){var b=window.location.pathname;if(b.indexOf("/")!=-1)b=b.split("/");var a=b[b.length-1]||"root";if(a.indexOf(".")!=-1)a=a.substring(0,a.indexOf("."));if(a>20)a=a.substring(a.length-19);return a},d=e(),c=function(a){this.a=0;this.b=[];this.c=[];this.d=[];this.e=0;this.f(a)};c.prototype={g:function(b){var c=new RegExp(d+b+"=(\\d+)"),a=document.cookie.match(c);return a?a[1]:this.h()},h:function(){for(var a=0,c=this.d.length;a<c;a++)if(b(this.d[a],"selected"))return a;return 0},j:function(d,c){for(var b=d.getAttribute("rel"),a=0;a<this.b.length;a++)if(this.b[a].getAttribute("rel")==b){j(this.b[a].parentNode,"selected");c&&this.e&&this.k(this.a,a)}else h(this.b[a].parentNode,"selected");this.l(b)},k:function(a,b){document.cookie=d+a+"="+b+"; path=/"},l:function(b){for(var a=0;a<this.c.length;a++)this.c[a].style.display=this.c[a].id==b?"block":"none"},m:function(a){if(a.id)for(var b=0;b<this.b.length;b++)if(this.b[b].getAttribute("rel")==a.id)return this.b[b];return a.parentNode.nodeName!="BODY"?this.m(a.parentNode):null},n:function(d,c){var a=document.getElementById(d);if(a){var b=this.m(a);if(b){this.j(b,0);if(!c)setTimeout(function(){a.scrollIntoView();g(a,-120)},0);else setTimeout(function(){window.scrollTo(0,0)},0);return 1}else return 0}},f:function(a){this.a=a.i;this.b=a.getElementsByTagName("a");this.d=a.getElementsByTagName("li");for(var b=0;b<this.b.length;b++)if(this.b[b].getAttribute("rel")){this.c.push(document.getElementById(this.b[b].getAttribute("rel")));var f=this;this.b[b].onclick=function(){f.j(this,1);return false}}var e=a.getAttribute("persist")||"";this.e=e.toLowerCase()=="true"?1:0;var d=window.location.hash;if(d&&d.length>1)if(this.n(d.substring(1),window.location.search.indexOf("noscroll=true")>-1))return;var c=this.e?parseInt(this.g(a.i)):this.h();if(c>=this.b.length)c=0;this.j(this.b[c],0)}};var a=[],i=function(d){var b=false;function a(){if(b)return;b=true;setTimeout(d,4)}if(document.addEventListener)document.addEventListener("DOMContentLoaded",a,false);else if(document.attachEvent){try{var e=window.frameElement!=null}catch(f){}if(document.documentElement.doScroll&&!e){function c(){if(b)return;try{document.documentElement.doScroll("left");a()}catch(d){setTimeout(c,10)}}c()}document.attachEvent("onreadystatechange",function(){document.readyState==="complete"&&a()})}if(window.addEventListener)window.addEventListener("load",a,false);else window.attachEvent&&window.attachEvent("onload",a)},f=function(){for(var e=document.getElementsByTagName("ul"),d=0,f=e.length;d<f;d++)if(b(e[d],"tabs")){e[d].i=a.length;a.push(new c(e[d]))}};i(f);return{open:function(c,d){for(var b=0;b<a.length;b++)a[b].n(c,d)}}}()

</script>

<ul class="tabs">
    <li><a href="#" rel="view1">{option}</a></li>
</ul>
<div class="tabcontents">
    <div id="view1" class="tabcontent">
        {param}
    </div>
</div>

The way I see it I need two different bbcodes to bring this together. I've gotten one. The usage would be [tab=Tab Title]Tab content.[/tab] When I try to create multiple tabs they won't stay together. It creates the tab title (highlightable/hoverable) and the content like it should, but separates the instances of the bbcode. I've tried to figure out a way to make multiple instances of the "tab" bbcode stay together by using another bbcode, but failed. If anyone can come in and make sense of anything I have so far, then finish this code, i'd be really grateful.