[ERLEDIGT] JQuery: Alle (anderen) Elemente schließen

[blabla333]

Leider bin ich in JavaScript nicht so bewandert, so dass ich nochmals eure Hilfe bei einer einfachen Sache brauche (ich verwende jquery):

1. Bei Aufrufen der Website sollen alle div-content per JavaScript geschlossen werden. Ich könnte die natürlich von vorneherein per display: none ausblenden, allerdings dachte ich mir, dass bei Besuchern, die JavaScript ausgeschaltet haben der Inhalt dann versteckt bleibt. Deshalb sollten die Container erst per JavaScript ausgeblendet werden. Für die meisten Besucher macht dann in der Darstellung keinen Unterschied und die, die JS ausgeschaltet haben, können den Inhalt trotzdem sehen (wenn auch nicht so schön). Da die Anzahl der Container variabel ist, müsste das allgemein umgesetzt werden. Also: Schließe alle div-Container der Klasse "content"...

2. Außerdem sollten die entsprechenden content-Container per slidetoggle (jquery) bei Klick auf "section" geöffnet/geschlossen werden. Soweit habe ich das auch:

$('section').click(function(){
      var content = $(this).children('.content')
      $(content).slideToggle();
    });

Allerdings hätte ich es gerne, dass beim Öffnen eines Containers immer alle anderen geschlossen werden, so dass ich letztlich ein Accordion erhalte.

<section class="accordion">
<header><h2>Überschrift 1</h2></header>
<div class="content">Inhalt 1</div>
</section>

<section class="accordion">
<header><h2>Überschrift 2</h2></header>
<div class="content">Inhalt 2</div>
</section>

<section class="accordion">
<header><h2>Überschrift 3</h2></header>
<div class="content">Inhalt 3</div>
</section>

 

[Asterixus]

$(window.document).ready(function () {
    $(".content").css("display", "none");
    $("section").click(function () {
        $(this).children(".content").slideDown();
        $(".content").not($(this).children(".content")).slideUp();
    });
});

 

[blabla333]

Danke. Leider funktioniert das nicht, die Container werden nicht ausgeblendet. Wenn ich jedoch die Zeile ausklammer, dann funktioniert das mit dem Accordion:

$(".content").css("display": "none");

Und noch einen Zusatz:
Bei Klick soll per

$(this).toggleClass('aktiv');

eine Klasse hinzugefügt werden (hierbei wird das Hintergrundbild geändert). Bei allen anderen soll diese Klasse wieder entfernt werden. Wie baue ich das korrekt ein?

 

[blabla333]

Am einfachsten geht es mit:

$(".content").hide();

Allerdings bräuchte ich noch Hilfe, was toggleClass angeht... Wie gesagt, beim Öffnen wird die Klasse "aktiv" hinzugefügt und bei allen anderen wieder entfernt...

 

[Tronjer]

Du musst das umgekehrt angehen. Erst kommen die Anweisungen, welche für alle Elemente gelten sollen und zum Schluss wird dem aktiven Objekt eine Eigenschaft zugewiesen.

 

[Asterixus]

Der Doppelpunkt muss durch ein Komma ersetzt werden, sorry ^^

 

[blabla333]

@tronjer:
Ich bekomme es einfach nicht hin:

  $("section").click(function () {
    $(".content").toggleClass(''); // Erst bei allen die zusätzlichen Klassen entfernen
    $(this).children(".content").slideDown();
    $(this).toggleClass('aktiv'); // Beim aktiven Element die Klasse 'aktiv' hinzufügen
    $(".content").not($(this).children(".content")).slideUp();
  });

 

[Tronjer]

Das bekommst du mit etwas Nachdenken aber selber raus. Überprüfe dein Script doch mal im Firebug. Die zweite Zeile sollte schon nicht funktionieren, und selbst wenn sie das täte, würde die dritte Zeile nichts bewirken.

 

[blabla333]

Ist denn toggleClass grundsätzlich die richtige Funktion dafür?
Es müsste ja eigentlich

$(".content").toggleClass('aktiv');

heißen.
Richtig? Das würde dann beim aufklappen die Klasse aktiv hinzufügen und beim Schließen die Klasse eben wieder entfernen. Also brauche ich den Befehl doch eigentlich nur einmal, oder? Nach meinem Verständnis lasse ich dann einfach die Zeile 2 weg, aber leider funktioniert das dann doch immer noch nicht.

Ich wühle mich immer durch die Ganzen Sachen durch und bin ja froh, wenn ich dann irgendwie doch die Dinge zum Laufen bekomme. Aber immer öfter hänge ich dann an einfachsten Dingen fest und brauche dann eben immer einen Wink von einem Außenstehenden und dann geht es wieder ein Stückchen weiter.

 

[Tronjer]

toggleClass() ist eine Zusammenfassung von addClass() und removeClass().

Aber was du ja eigentlich willst

// Beim Klick auf Element <section>
$("section").click(function () {
  // tu was
})

Hier könnte man nun einen Ansatz mit each() und hasClass() bringen, um alle Elemente zu schließen und einen Teil des DOM nach dem Vorhandensein der CSS-Klasse .content zu durchsuchen. Im Hinblick auf dein gepostetes HTML dürfte so etwas hier aber ausreichen.

$('div').slideUp().removeClass('content');

Und die Klasse anschließend dem Kindelement des aktuellen Objekts wieder zuzuweisen:

$(this).find('div').addClass('content').slideDown();

Ich habe es jetzt nicht ausprobiert, aber das wäre ein gedanklicher Ansatz.

 

[blabla333]

Tausend Dank. Jetzt habe ich es endlich hinbekommen. Allerdings fehlte vor removeClass noch ein parent(), da die Klasse zu dem höhergelegenen section-Element gehörte.

 

[blabla333]

Edit this Fiddle - jsFiddle
--> Soweit mein Accordion (Jquery).

Allerdings gibt es noch ein paar Punkte, die ich weiter optimieren möchte:


1a) Eine aufgeklappte Sektion sollte nicht mehr als ganze "klickbar" sein, da es sonst zu Problemen gibt, wenn innerhalb des ganzen z.B. ein Link (siehe Text 3) steht. Ideal wäre es, wenn bei einer ausgeklappten Version nur obere Anteil (also Icon und Überschrift) "klickbar" sind.
1b) Außerdem sollte bei Klick auf eine aufgeklappte Sektion diese einfach nur zugeklappt werden (aktuell klappt sie zu und wieder auf).
2) Bei Auswahl bzw. beim Aufklappen soll die aktuelle Sektion nach oben gescrollt werden, d.h. am oberen Rand stehen