Keskustelu: Nettisivujen teko: Elementin avaus ja piilotus liukuvasti

Olis tarkoitus piilottaa pitkästä tekstistä osia, klikattavien otsikoiden alle.
Alla oleva koodi kyllä toimii (javascript tekee "tyylivaihdon"), mutta piilotettavat/näytettävät tekstipätkät vaihtelevat pituudeltaan, joten tuo 'height:400px' luo toisinaan turhaan tyhjää tilaa.
'height:auto' toimii kyllä, mutta silloin ei ole viivettä divin avauksessa, joka nimenomaan olisi tarkoitus.

Eli miten? Pitääkö alkaa vääntämään jQuerya? CSS:llä tuo olis näppärä tehdä.

div.hidden {
    height: 0px;
}
div {
    height: 400px;
    transition: height 0.5s;
	overflow:hidden;
	width: 700px;
	margin-left: 100px;
}

Mod. lisäsi kooditagit!

Voisin kuvitella että helpoin olisi height:auto ja sitten (esim. jQueryn kanssa) päivittää kaikkiin heightiksi toteutuneen korkeuden.

Jep, onkelma ratkesi juurikin jQueryn avulla, ja paljon yksinkertaisemmin mitä kuvittelin. Yksi pieni minua vaivaava ominaisuus korjaantui samalla.
Thänks.

Koodi löytyy osoitteesta; http://papermashup.com/simple-jquery-showhide-div/

Ei tuohon mitään js:ää tarvita*, mikäli avattuna korkeus on vakio. Riittää kun käyttää css:n transition-ominaisuutta.

div {
  height: 400px;
  max-height: 400px;
  transition: max-height 0.3s;
}

div.closed {
  max-height: 0;
}

* No sen verran tarvitsee, että täytyy lisätä tuo efektin laukaiseva luokka.