(in)visible divs

[anoniem]

Hallo mensen! Ik ben bezig met het volgende: Ik wil graag een lijstje met reacties weergeven op een pagina. Waarbij normaal gesproken alleen maar de titels weergegeven staan. Pas als er op de titel wordt geklikt (of bv het plusje ervoor) moet de gehele tekst (variabele lengte en dus variabel aantal regels) te lezen worden. Ik wilde dit als volgt aanpakken: Standaard wordt de hele pagina ingeladen met de stukken tekst zichtbaar. Daarna wordt met een onload alle stukken tekst onzichtbaar gemaakt [code:1:aca88b080a]document.getElementById('tekst1').style.visibility="hidden";[/code:1:aca88b080a] en moeten de titels van opvolgende elementen omhoog geplaatst te worden. Ik dacht dat als volgt te doen: [code:1:aca88b080a]document.getElementById('titel2').style.top= document.getElementById('tekst1').style.top;[/code:1:aca88b080a] Geen probleem tot nu toe. Alleen werkt dit alleen als de positie van de divs absoluut gedifineerd worden. Maar hoe doe ik dit? Dit moet naar mijn idee namelijk al gebeuren als de pagina in de 'uitgeklapte vorm' in eerste instantie opgebouwd wordt (voordat de verschillende stukken tekst met onload ingeklapt worden). Maar hoe weet ik nou hoe lang een reactie is? Oftewel, hoe weet ik nou wat voor waarde ik als absolute positie ik op moet geven? Of kan dit misschien op aan makkelijkere manier? Groeten. Jasper

[anoniem]

ik denk dat je te moeilijk denkt.. Je wil in het begin de reacties niet laten zien, dus kun je ze beter in je css al op hidden, of display:none zetten. Een klein stukje javascript zorgt er dan voor dat de reactie wel of niet t zien is. Hoe de reactie is gepositioneerd doet niet ter zake, het hoeft helemaal niet absoluut te zijn. Als een element van display:none, naar display:block gaat dan schuiven de elementen eronder gewoon netjes mee (tenzij die wel absoluut gepositioneerd zijn). bijv: [code:1:97db8c7dab]<style type="text/css"> .reactie p { display: none; } </style> <script type="text/javascript" language="Javascript"> function handleDisplay(n) { var o = document.getElementById('reactieTekst' + n).style; o.display = (o.display != 'block') ? 'block' : 'none'; } </script> <div id="reactie1" class="reactie"> <h3 onclick="handleDisplay(1)">Reactie</h3> <p id="reactieTekst1"> bli bli </p> </div> <div id="reactie2" class="reactie"> <h3 onclick="handleDisplay(2)">Nog een reactie</h3> <p id="reactieTekst2"> bla bla </p> </div>[/code:1:97db8c7dab]

[anoniem]

Ok dan! bedankt! Moet zo wel gaan lukken denk ik!