Vor Kurzem stand ich vor dem Problem, dass ich eine größere Liste mit Daten veröffentlichen wollte, bei der ich immer schon einen kleinen Vorschau-Teil zeigen wollte, der sich bei Klick auf einen Link zum kompletten Inhalt erweitert. Zum einen sollte dabei die Seite nicht neu geladen werden müssen, und zum anderen sollte ein vorher geöffneter Inhalt sich schließen, sobald ein anderer Inhalt geöffnet wird. Leider habe ich nur Scripte gefunden, die vor allem letzteres nicht konnten.

Ich bin mir zwar ziemlich sicher, dass man das Problem mit Ajax- oder JS-Frameworks wie jQuery, MooTools oder script.aculo.us in den Griff bekommen würde, aber es war mir einfach zu banal, um dafür gleich ein ganzes Framework zu laden.

Also habe ich mir mit Hilfe der Funktion getElementsByClassname() ein eigenes kleines JS geschrieben, das mir das Problem löst. JS-Spezis schlagen vermutlich die Hände über dem Kopf zusammen, aber da ich mich im Normalfall nicht weiter mit JavaScript beschäftigte und das Dingen problemlos in allen Systemen läuft, reicht es mir aus.

Die Funktionen

function switchClass(obj)
{
 if (obj.className == "hide") {obj.className = "show";}
 else {obj.className = "hide";}
}

function switchElementsByClassName(class_name,thisObj)
{
 var all_obj,ret_obj=new Array(),j=0,teststr;
 if(document.all)all_obj=document.all;
 else if(document.getElementsByTagName && !document.all)
 all_obj=document.getElementsByTagName("*");
 for(i=0;i
  if(all_obj[i].className.indexOf(class_name)!=-1){
   teststr=","+all_obj[i].className.split(" ").join(",")+",";
   if(teststr.indexOf(","+class_name+",")!=-1)
   {ret_obj[j]=all_obj[i];j++;}
  }
 }
 for (var i = 0; i < ret_obj.length; i++) {
  if (ret_obj[i].id!=thisObj) {ret_obj[i].className="hide";}
 }
}

Beispiele

Beispielanwendung ansehen

Beispieldaten als .zip downloaden

Getestet mit:
Win 2000: Firefox 2, Internet Explorer 5 - 7
MacOSX: Safari 2, Firefox 2 , Internet Explorer 5