Sortierlis

[admin]

Hi,
ich habe mal wieder ein Problem (und damit mein ich nicht das Ergebnis der deutschen Nationalmannschaft eben )
Ich versuche eine Liste zu erstellen, mit z.B. Automarken, Obst, Städten und  Tieren.
Alles komplett durcheinander.
Jetzt möchte ich via Buttons nur noch eine Kategorie einblenden. Dabei sollen jedoch nicht nur die anderen ausgeblendet werden, sondern die jeweilig dazugehörigen Elemente nach oben nachrutschen.

Wichtig ist mir hierbei, keine Listenelemente zu benutzen. Theoretisch könnte z.b. bei jedem Element noch ein Bild dabei sein oder so. Also es sollen quasi ganze <div> Blöcke sortiert werden.

Ich habe verschiedenes probiert. Ich dachte an .style.display ="none". Allerdings funktioniert das nicht.
Desweiteren frage ich mich ob man das nur über den Klassennamen regeln kann, da die Klassennamen in meinen Dateien mittlerweile oft schon komplett überladen sind.

MfG

Code:

<div class ="row">
 <button id="ST">Städte</button>
 <button id ="OB">Obst</button>
 <button id="AU">Automarken</button>
 <button id="TI">Tiere</button>

 <div class="col-xs-6 col-md-2"></div>

 <div class="col-xs-6 col-md-2">
<div  class ="Städte">Hamburg</div>
<div class ="Obst">Birnen</div>
<div class ="Städte">Berlin</div>
<div class ="Autos">Mercedes</div>
<div class ="Obst">Äpfel</div>
<div class ="Autos">BMW</div>
<div class ="Tiere">Bär</div>
<div class ="Städte">München</div>
<div class ="Autos">Ford</div>
<div class ="Tiere">Hase</div>
<div  class ="Städte">Dortmund</div>
<div class ="Obst">Kirschen</div>
<div class ="Städte">Erfurt</div>
<div class ="Autos">Audi</div>
<div class ="Obst">Melonen</div>
<div class ="Autos">Ferrari</div>
<div class ="Tiere">Hund</div>
<div class ="Städte">Tokio</div>
<div class ="Autos">Trabant</div>
<div class ="Tiere">Seehund</div>
</div>
</div>

<script>

document.getElementById('AU').onclick=function(){


 document.getElementsByClassName("Tiere").style.display='none';
 document.getElementsByClassName("Städte").style.display='none';
 document.getElementsByClassName("Obst").style.display='none';
    }




document.getElementById('TI').onclick=function(){
}
document.getElementById('ST').onclick=function(){
}
document.getElementById('OB').onclick=function(){
}

</script>