Mehrere Divs mit JQuery ein und ausklappen

K

Kristian

Hi, ihr seid (mal wieder) meine letzte Hoffnung. :)

Und zwar habe ich diesen Quellcode (den ich leider als nicht registrierter User nicht formatieren kann):

<script src="http://code.jquery.com/jquery-latest.js"></script>

$(function() {
$("#showbox").click(function() {
$("#box").slideToggle(300);
});
});

<a href="#" id="showbox" class="minimize" title="Die Angebotbeschreibung ausblenden.">Ausblenden 1</a>
<div id="box">Text 1 und so!</div><br />

<a href="#" id="showbox" class="minimize" title="Die Angebotbeschreibung ausblenden.">Ausblenden 2</a>
<div id="box">Text 2 und so!</div>

Nun generiere ich aber mit PHP reichlich "showboxen" einer unterschiedlichen Anzahl, wie löse ich das Problem geschickt? Hat JQuery da auch schon etwas "Fertiges"?
Oder muss ich uncool eine JavaSchleife einbauen? Ich kenne mich leider nicht allzu gut in Javascript aus, also wäre es klasse, wenn jemand eine Idee hätte!

Dankööö

Edit: Bis jetzt ist es ja leider so, dass nur die erste Box geöffnet/geschlossen wird.

Ich dachte man könnte an die id="showbox" einfach eine Nummer anhängen, damit js weiß, welche Showbox/Box gemeint ist. Aber wie bringt man das dem JS bei?
 
Hi,

IDs müssen innerhalb eines Dokuments eindeutig sein. Aus diesem Grund solltest du die Elemente mit Klassen versehen und darüber ansprechen.

Wenn du die zugehörige HTML-Passage entsprechend anpasst,
Code:
<div><a href="#" class="showbox" class="minimize" title="Die Angebotbeschreibung ausblenden.">Ausblenden 1</a>
<div class="box">Text 1 und so!</div><br /></div>

<div><a href="#" class="showbox" class="minimize" title="Die Angebotbeschreibung ausblenden.">Ausblenden 2</a>
<div class="box">Text 2 und so!</div></div>
sollte folgendes Code-Fragment das Gewünschte ausführen.
Code:
$(function(){
  $(".showbox").click(function(){
    $(this).parent().find(".box").slideToggle(300);
  });
});

Ciao
Quaese
 
Zurück