multiple Tabboxe on a pge / works but dirty - JS help needed

multiple Tabboxe on a pge / works but dirty - JS help needed

Hello everybody,

I found a nice Tabbox tutorial (thanks to the author) which works nice and smooth.
I altered the code a bit so that multiple boxes will work on one page.
Well, that works too - but it is made the dirty way.
All and all I need like 15 boxes on 1 page and the dirty code KB would blow the site

I am no JS coder and I'm trying for some days now to find a way to get the thing working ;)

Kay. Here ist the code - which works - 2 boxes.
There is the function openTab and the class tabbed-box.

If I add a eg 1 to them I can make the second box work independently.

Is it possible to rewrite the script, so that openTab and the class tabbed-box get a 1, 2, 3 and so on - having one script for all boxes not one for every box?

thank you all in advance

pmuf


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/equalHeight/jquery.equalheights.js"></script>


<script type="text/javascript">
var currentTab = 0; // Set to a different number to start on a different tab.
var x = 0;
function openTab(clickedTab) {

   var thisTab = $(".tabbed-box .tabs a").index(clickedTab);
   $(".tabbed-box .tabs li a").removeClass("active");
   $(".tabbed-box .tabs li a:eq("+thisTab+")").addClass("active");
   $(".tabbed-box .tabbed-content").hide();
   $(".tabbed-box .tabbed-content:eq("+thisTab+")").show();
   currentTab = thisTab;
}

$(document).ready(function() {
   $(".tabbed-content").equalHeights();                  
   $(".tabs li:eq(0) a").css("border-left", "none");
   $(".tabbed-box .tabs li a").click(function() {
      openTab($(this)); return false;
   });
   
   $(".tabbed-box .tabs li a:eq("+currentTab+")").click()
});

</script>

<script type="text/javascript">
var currentTab = 0; // Set to a different number to start on a different tab.

function openTab1(clickedTab) {
   var thisTab = $(".tabbed-box1 .tabs a").index(clickedTab);
   $(".tabbed-box1 .tabs li a").removeClass("active");
   $(".tabbed-box1 .tabs li a:eq("+thisTab+")").addClass("active");
   $(".tabbed-box1 .tabbed-content").hide();
   $(".tabbed-box1 .tabbed-content:eq("+thisTab+")").show();
   currentTab = thisTab;
}

$(document).ready(function() {
   $(".tabbed-content").equalHeights();                  
   $(".tabs li:eq(0) a").css("border-left", "none");
   $(".tabbed-box1 .tabs li a").click(function() {
      openTab1($(this)); return false;
   });
   
   $(".tabbed-box1 .tabs li a:eq("+currentTab+")").click()
});
</script>

<style type="text/css">
<!--
   * { margin: 0; padding: 0; }
   body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 62.5%; }
   p { margin: 1em 0; }
   #wrap {
      width: 500px;
      font-size: 1.2em;
      margin: 3em auto; }
#tb {
      width: 302px;
      background: #fff url(tabbed-body-bg.jpg) repeat-x bottom;
      border: 1px solid #ddd; }
#tb #t li {
      list-style: none;
      float: left; }
#tb #t li a {
      display: block;
      width: 100px;
      padding: 5px 0;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      color: #888;
      background: #fff url(tabbed-tab-bg.jpg) repeat-x bottom;
      border-left: 1px solid #ddd;
      border-bottom: 1px solid #ddd;}
#tb #t li:first-child a {
      border-left: none; }
#tb #t li a:hover {
      color: #333; }
#tb #t li a:focus {
      outline: none; }
#tb #t li a.active {
      background: #fff;
      color: #333;
      border-bottom: 1px solid #fff; }
#tc {
      padding: 3em 1em 1em 1em;
      display: none; }


-->
</style>
</head>

<body>
 
<div id="wrap">
   <div id="tb" class="tabbed-box">

      <ul id="t" class="tabs">
         <li><a href="#">Reader Faves</a></li>
         <li><a href="#">Rob&rsquo;s Faves</a></li>
         <li><a href="#">CSS Primer</a></li>
      </ul>
      <div id="tc" class="tabbed-content">
         <p>Here's my content for tab 1</p>

         <p>Here's my content for tab 1</p>
         <p>Here's my content for tab 1</p>
      </div>
      <div id="tc" class="tabbed-content">
         <p>Here's my content for tab 2</p>
         <p>Here's my content for tab 2</p>
         <p>Here's my content for tab 2</p>

         <p>Here's my content for tab 2</p>
      </div>
      <div id="tc" class="tabbed-content">
         <p>Here's my content for tab 3</p>
         <p>Here's my content for tab 3</p>
         <p>Here's my content for tab 3</p>
         <p>Here's my content for tab 3</p>

         <p>Here's my content for tab 3</p>
      </div>
   </div>
</div>
<p></p>
<div id="wrap">
   <div id="tb" class="tabbed-box1">

      <ul id="t" class="tabs">
         <li><a href="#">Reader Faves</a></li>
         <li><a href="#">Rob&rsquo;s Faves</a></li>
         <li><a href="#">CSS Primer</a></li>
      </ul>
      <div id="tc" class="tabbed-content">
         <p>Here's my content for tab 1</p>

         <p>Here's my content for tab 1</p>
         <p>Here's my content for tab 1</p>
      </div>
      <div id="tc" class="tabbed-content">
         <p>Here's my content for tab 2</p>
         <p>Here's my content for tab 2</p>
         <p>Here's my content for tab 2</p>

         <p>Here's my content for tab 2</p>
      </div>
      <div id="tc" class="tabbed-content">
         <p>Here's my content for tab 3</p>
         <p>Here's my content for tab 3</p>
         <p>Here's my content for tab 3</p>
         <p>Here's my content for tab 3</p>

         <p>Here's my content for tab 3</p>
      </div>
   </div>
</div>




</body>
</html>