c'e' intanto una piccola sfumatura che correggerei
if (links[i].getAttribute('class') == 'show') {...}
qui IE non rilevera' il class, ma il className,
allora per mantenere il controllo uniforme per tutti i browser puoi direttamente fare
if (links[i].className == 'show') {...}
riguardo il doppio nextSibling, la risposta e' semplice per quanto possa apparire folle:
nel markup vai a capo e cosi' facendo analizzando l' alberatura via DOM risulta un nodo vuoto (appunto, il primo nextSibling)
se <div> fosse sulla stessa riga di codice di <a></a> non avresti il nodo in piu'
per evitare si usa una funzione di appoggio che valuta il nodeType del nodo e prosegue fino a che non trova il nodeType di un tag (1) prima di ritornare il riferimento ad esso alla funzione che lo utilizzera'
codice:
function getNextSibling(node){
while(node=node.nextSibling){
if(node.nodeType=='1') return node
}
}
codice:
function toggle(object) {
var detailBox = getNextSibling(object);
...
}
...
// chiudo il contenuto per coloro che utilizzano il JS
getNextSibling(links[i]).style.display='none';
...
questo ti permette di riferirti sempre al vero nextSibling nonostante rimandi a capo, spazi vuoti nel codice e perfino commenti
codice:
testo 1
<div class="dettagli">
BLA BLA BLA
BLA BLA BLA
</div>
ciao