Aufklappen von Website-Bereichen mit Prototype?

[Felix Riesterer]

Lieber Knut,

Gibt es eine Möglichkeit Bereiche ein- und aufzuklappen (also klick auf einen Link öffnet seinen Subbereich)?

Weiss einer von euch, welche Funktionen ich dafür nutzen muss ud ob das in Prototype integriert ist?

Dazu braucht es kein Prototype. Das geht wesentlich schlanker!

Du schreibst Dir einfach selbst ein Javascript, dass sich HTML-Elemente einer bestimmten Klasse (suche im Forum nach "getElementsByClassName") sucht, um darin die Elemente auf display:none zu schalten. Bei erneutem Anklicken stellt es den vorherigen Zustand wieder her.

Alternativ verteilst Du mit Deinem Script Klassen, deren CSS-Eigenschaften so beschaffen sind, dass eben die entsprechenden Teile der Website unsichtbar geschaltet werden.

Wenn man sich in Erinnerung ruft, dass das Verändern einer Style-Eigenschaft  mittels JavaScript so ähnlich funktioniert, als schriebe man im HTML-Element selbst das style-Attribut, dann ist es am einfachsten, wenn Du in einer externen Datei Dein Layout bereithälst, Dein Script eben "vor Ort" an den Elementen die display-Eigenschaft auf "none" setzt, um im Aufklapp-Falle, eben diese Eigenschaft auf "" zu setzen, sodass Deine in der externen CSS-Datei angegebene (oder default-)display-Eigenschaft wieder gilt.

Bei Klassennamen kannst Du die entsprechende Klasse aus dem String herausfiltern, falls ein Element mehreren Klassen zugeordnet ist.

Das könnte ich mir so vorstellen:

<div class="artikel">  
    <h2>Unterkapitel</h2>  
    <p>Textabsatz...</p>  
    <p>Noch ein Textabsatz...</p>  
</div>

Du wirst wohl leider nicht darum herum kommen, Elternelemente zu definieren,  wenn Du nicht mühsam die Zusammengehörigkeiten von Überschriften und nachfolgenden Textabsätzen im Script selbst überprüfen willst.

Wenn jetzt Dein Script dem DIV eine weitere Klasse zuweist, dann kannst Du den Artikel zuklappen:

<div class="artikel zu">  
    <h2>Unterkapitel</h2>  
    <p>Textabsatz...</p>  
    <p>Noch ein Textabsatz...</p>  
</div>

Jetzt müsstest Du nur in Deinem Stylesheet das so definieren:

.artikel.zu * { display: none; }  
.artikel.zu h2 { display: block; }

Beim erneuten Anklicken des Artikels wird eben die "zu"-Klasse wieder entfernt, und die Kindelemente werden wieder sichtbar.

Damit ein Besucher auch kapiert, dass da etwas faltbar ist, solltest Du einen entsprechenden optischen Hinweis erzeugen! Das könnte ein Hintergrundbild zu der Überschrift sein, welches eine Art Icon enthält, das dem Benutzer klar macht, dass er da etwas öffnen kann. Eine zusätzliche Veränderung des Cursors über der Überschrift hilft zusätzlich:

.artikel.zu * { display: none; }  
.artikel.zu h2 {  
    display: block;  
    cursor: pointer;  
    background-image: url(pfad/bilder/aufklapp-icon.png);  
    background-position: left center;  
    padding-left: 20px;  
}

Liebe Grüße aus Ellwangen,

Felix Riesterer.