jQuery verschiedene Boxen "ausfahren"

_aze_ · 17.04.2013

Hey,
ich habe mal wieder eine Frage.
Ich habe auf meiner Seite 2 Boxen, deren Inhalt beim Klick auf den Titel ausgefahren werden.

Bisher habe ich es wie folgt gelöst:
jQuery:

PHP:

$('.show_content_1').toggle(function(){
            $(this).removeClass("content_border");
            $(".sup_content_1").slideDown(500);
        },function(){
            $('.sup_content_1').slideUp(500,"",function(){
                $('.show_content_1').addClass("content_border");
            });
        });

HTML:

<div id="sup_box">
<div class="show_content_1 content_border title">Box1</div>
<div class="sup_content_1" id="sup_content_1">
Inhalt
</div>
</div>

Das funktioniert auch wie gewünscht.
Allerdings möchte ich für die weiteren Boxen nicht immer neue Klassen anlegen müssen (show_content_1, show_content_2, etc.).
Gibt es da eine Möglichkeit das anders zu machen?
Habe mal etwas gesehen, dass ca. so aussah:

HTML:

$(".sup_content_1",this).slideDown(500);

Mit freundlichen Grüßen

Duddle · 17.04.2013

AW: jQuery verschiedene Boxen "ausfahren"

Dein Beispiel ist für mich nicht eindeutig genug, ich sehe z.B. nicht wann du genau den JS-Ausschnitt aufrufst. Ausserdem sagst du nicht, ob die neuen Boxen eigene klickbare Elemente haben werden oder es anders gesteuert wird.

Das Anlegen von nummerierten Klassen deutet aber schon auf einen Fehler hin. In der Regel hast du eine einzige Klasse o.ä., an die eine bestimmte Funktionalität gebunden wird. Dann hangelst du dich im DOM-Baum vom getriggerten Element aus mit verschiedenen Funktionen zum Ziel und führst dort die gewünschten Operationen durch.

Duddle