Box mit JavaScript vergößern bzw. verkleinern

[Speedy.]

Hallo zusammen,

ich arbeite gerade an einer neuen Webseite. Auf diese soll eine lange Liste mit verschiedenen Berichtvorschauen, also links einem kleinen Bild und rechts ein kurzer Text. Per Link kommt man dann auf die eigentliche Seite.
So, da es aber sehr viele Artikel sind, möchte ich die Vorschauseite etwas übersichtlicher gestalten und das Ganze komprimieren. Hier könnt ihr sehen, wie es bis jetzt aussieht:

http://leo-club-weilamrhein.de/dev/activities.html

Ihr seht zwei Abschnitte: oben sind die grauen Balken höher, beim Klicken auf die Überschrift wird der Inhalt angezeigt (JavaScript) . Unten sind die Balken schon kleiner, beim Anklicken fährt der Balken aus und der Inhalt wird sichtbar (reines CSS3).

Ich bin mit beidem nicht so recht zufrieden. Was ich möchte:

1. Wenn die Überschriften nicht angeklickt werden, soll es aussehen wie unten, sprich sie sollen "eingefahren sein", eine kleinere Höhe besitzen (man sieht nur die Überschrift).
2. Wenn die Überschrift angeklickt wird, soll sich die Box ausfahren und der Inhalt sichtbar werden. Es soll aussehen, wie bei der reinen CSS-Lösung unten.
3. Wenn es geht, und ich weiß, es geht irgendwie, dann sollte eine Animation im Spiel sein.

Ich möchte nicht auf die reine CSS3-Lösung zurückgreifen, sie hat viele Nachteile (nicht in allen Browsern kompatibel, durch die Links wird der Bildlauf immer wieder verschoben etc.) hat.
Kann mir da jemand helfen? Der Code sieht gerade so aus:

JS:

<script type="text/javascript">
    function anzeigen(das) {
         if (document.getElementById(das).style.display=='none') {
              document.getElementById(das).style.display='block';
              }
              else {
              document.getElementById(das).style.display='none';
              }
       }
</script>

HTML:

<article>
<header>
<a href="javascript:anzeigen('eins');">Basteln im Schmuckatelier "Ahorn"</a>
</header>
<div style="display: none;" id="eins">
<img src="img/small/begegnungen/180-1.jpg" />
<p>Egal ob bunt oder einfarbig, kugelrund oder in allerlei anderen Formen, für den   Hals oder den Arm – wir hatten einiges zu bieten. Wie im Jahr zuvor trafen wir uns am ersten Sonntag im Advent mit den Heimbewohnern, um gemeinsam Schmuck herzustellen – sei es für den Eigenbedarf oder als Weihnachtsgeschenk für die Eltern oder als Überraschung für Verwandte. Denn wer freut sich nicht über selbst produzierte Geschenke? </p>
<p class="mehr">
<a href="activities/2011/basteln_im_schmuckatelier_ahorn.html">Mehr >>></a></p>
</div>
</article>

Im Endeffekt kann man sagen, ich eine Mischung aus beiden Lösungen

Danke schonmal

Grüße
Speedy

 

[Yuuri]

Nutz mal inline-block anstatt block. Funktioniert dann mit Firebug wunderbar.

edit:

#mitglieder article, #activities article {
    height: 250px;
}

Auch mal die fixe Höhe löschen!

 

[Speedy.]

Hey, danke für die Hilfe, es hat geklappt!
Allerdings war es nicht nötig, von display:block auf inline zu springen, sondern nur die fixe Höhe des Containers zu entfernen. Ich habe dann dem p-Tag im Container eine Höhe zugeordnet, es funktioniert einwandfrei.

Aber eine Sache fehlt mir noch, quasi das i-Tüpfelchen
Die genannte Animation mit JavaScript. Sprich, wenn man den Link anklickt, soll der Inhalt smooth eingeblendet werden. Da ich Neuling in JS bin, weiß ich nicht so wirklich, wie ich das Einfügen kann? Kann mir da noch jemand helfen?

Grüße
Speedy

 

[Daaron]

Machs dir leicht, nutz eine JS-Bibliothek wie jQuey oder Mootools. In Mootools kannst du z.B. über das Reveal-Modul sehr schnell und effektiv Inhalte ein- und ausblenden (Höhen- oder Breitenänderung, Transparenzänderung, display:none sobald der Container zusammengefaltet wurde). Statt dir selbst 30 Zeilen JS aus den Fingern zu saugen brauchst du dann effektiv nur die reveal- und dissolve-Funktionen der Elemente triggern, wie es dir passt.

 

[Speedy.]

Ich habe jQuery schon eingebunden, da die Slideshow für die Bilder darauf zugreift. Allerdings schaffe ich es selbst nicht, diesen Code für die Animation zu schreiben bzw. auf die JS-Bibliothek zu verweisen. Ich weiß, dass man irgendetwas mit .animate 500; oder so machen muss. Das wars aber auch schon...

 

[Daaron]

Bei jQ kann ich dir leider nicht weiterhelfen, ich versuch mich davon fern zu halten. Ich arbeite primär mit dem CMS Contao, und das bindet nun einmal Mootools als Standard ein. Da wird man irgendwann betriebsblind und bleibt bei seinem Stamm-Framework.

Im Zweifel: Read the source, Luke!
bzw. die Handbücher und Tutorials.