Jquery - SlideToggle mit mehreren Links und dem selbern Container

[erschaup]

Hallo,
ich bin neu in jquery und habe auf meiner Seite einen Link, mit dem ich einen Container öffnen und schließen kann. Nun soll es aber so sein, dass ich mehrere Links haben möchte (waagrechtes Menü) und ich beim Klick auf jeden beliebigen Menüpunkt - sie sollen schon unterscheidbar sein wenn ich ein hover habe, immer den selben Container öffne. Irgendwie schaffe ich es aber nicht, weitere Links so einzubinden, dass ich den Container öffnen kann. Es fuktioniert immer nur mit dem ersten Link.

Hier mal mein Code. Ich wäre über jeden Tipp dankbar.

                <div class="clear">

        
     <div id="navi_inner" class="hauptnavigation">
     <ul>
     <li><a href="#" id=slideToggle>Unternehmen</a></li>
     <li><a href="#" id=slideToggle>Leistungen</a></li>
     </ul>
     </div>
     
	<br/>
	<div class="slideTogglebox">
	 	Hier kommt das Untermenü rein!
	</div>

Und das jquery-Script dazu:

<script type="text/javascript">



$("#slideToggle").click(function () {
   $('.slideTogglebox').slideToggle(200);
   $(this).toggleClass("active");
}); 
 
$("#reset").click(function(){
	location.reload();
});


</script>

Vielen Dank schon mal für Eure Hilfe.

 

[Quaese]

Hi,

eine ID muss innerhalb eines Dokumentes eindeutig sein. Verwende hier besser Klassen, über die du dann die gewünschten Elemente selektieren kannst.

     <li><a href="#" class=slideToggle>Unternehmen</a></li>
     <li><a href="#" class=slideToggle>Leistungen</a></li>

$(".slideToggle").click(function () {
   $('.slideTogglebox').slideToggle(200);
   $(this).toggleClass("active");
});

Ciao
Quaese