Inserire varie Tabs all'interno di una Tab principale

[dvd810]

Salve a tutti.
Prendo in esempio questo codice, volendo inserire all'interno di ogni tab "primo", "secondo", "terzo", "quarto", un'altra tab.

<script>function Yetii(obj,active){
    
    this.active = (active) ? active : 1,
    this.timeout = null,
    this.tabclass = 'tab',
    this.activeclass = 'active',
    
    this.getTabs = function(){
 
        var retnode = [];
        var elem = document.getElementById(obj).childNodes;     //modified for IE 5.x support
        for (var i = 0; i < elem.length; i++) {
        if (elem[i].className==this.tabclass) retnode[retnode.length]=elem[i];
        }
    
        return retnode;
    
    },
        
    this.links = document.getElementById(obj+'-nav').getElementsByTagName('a'),
    this.tabs = this.getTabs();
    
    this.show = function(number){
        
        for (var i = 0; i < this.tabs.length; i++) {
        this.tabs[i].style.display = ((i+1)==number) ? 'block' : 'none';
        this.links[i].className = ((i+1)==number) ? this.activeclass : '';
        }
    
    },
    
    this.rotate = function(interval){
    
        this.show(this.active);
        this.active++;
    
        if(this.active > this.tabs.length) this.active = 1;
    
        var self = this;
        this.timeout = setTimeout(function(){self.rotate(interval);}, interval*1000);
    
    },
    
    this.init = function(interval){
    
        this.show(this.active);
        
        var self = this; 
        for (var i = 0; i < this.links.length; i++) {
        this.links[i].customindex = i+1;
        this.links[i].onclick = function(){ if (self.timeout) clearTimeout(self.timeout); self.show(this.customindex); return false; };
        } 
        
        if (interval) this.rotate(interval);
            
    };


};
</script>

<div id="tabcont1" class="tabpanel">
<ul id="tabcont1-nav" class="tabnav">
<li><a href="#tab1"><span>News</span></a></li>
<li><a href="#tab2"><span>Articoli</span></a></li>
<li><a href="#tab3"><span>Video</span></a></li>
<li><a href="#tab4"><span>Download</span></a></li>
</ul>
<div id="tab1" class="tab">primo</div>
<div id="tab2" class="tab">secondo</div>
<div id="tab3" class="tab">terzo</div>
<div id="tab4" class="tab">quarto</div>
</div>

<script type="text/javascript">var tabber=new Yetii('tabcont1');
tabber.init();
</script>

Copio e incollo il codice html all'interno di ogni tab, rinominando "tabcont1", "tabcont1-nav" e "tab1" con valore crescente e riporto per ogni tab, il codice finale JS:

<script type="text/javascript">var tabber=new Yetii('tabcont1');
tabber.init();
</script>

A questo punto mi funzionano correttamente le tabs indentate ma non quella principale.
Cosa devo modificare per risolvere il problema?

Grazie a tutti.

[m4rko80]

Ciao, hai modificato gli id dei div contenitori tipo questo <divid="tab1"class="tab">primo</div> ?

Il click su <li><ahref="#tab1"><span>News</span></a></li> va a cercare l'id tab1 che dev'essere univoco.

[dvd810]

Ciao m4rko80.
Come capita spesso, focalizzandosi in una parte del codice, l'inghippo lo si trova altrove (ho sbattuto la testa per 2 giorni ).
Tagliando e incollando il codice precedentemente creato per inserirlo all'interno del Div tabcont1, la chiusura del Div principale del sito, rimaneva al di fuori del div Tab tabcont1, scalando di conseguenza quelli presenti e lasciando quello del tab privo di chiusura, rendendo impossibile il corretto funzionamento.
Grazie per l'interessamento.