Wat is de html code voor het maken van een soort venstertje dat je open kan klikken (zie plaatje/uitleg)?

Question

Ik ben bezig met het schrijven van een tekst op internet. Nu heb ik een opsomming gemaakt, en wil ik per stuk wat meer informatie geven. Maar dan wel dat je erop moet klikken om die informatie te zien, voor de overzichtelijkheid van de site.
Hopelijk maakt mijn plaatje (let aub niet op de tekst, dat is volslagen onzin), duidelijk wat ik bedoel: ik zoek een html code die ervoor zorgt dat de verdere informatie erover pas eronder, op dezelfde pagina, wordt geopend als je erop klikt.
Deur D is dan waar je als bezoeker vd site op geklikt zou hebben.

Iframe lijkt op zich op wat ik bedoel, maar is hier niet geschikt voor.

 · Answer

Je kunt dit niet met alleen HTML doen. HTML is een statische taal en wat jij wilt laten gebeuren is iets dynamisch. Wat je zou kunnen doen is met javascript de zichtbaarheid van een <DIV> waar je de tekst in zet aanpassen.

Een eenvoudiger alternatief is gebruikmaken van 'Lightbox'. Dit is een bibliotheek met een aantal kant en klare javascripts en duidelijke uitleg waarmee je een mooi geanimeerd venster kunt laten verschijnen. Meestal word LightBox gebruikt voor foto's, maar je kunt er allerlei inhoud mee tonen.

 · Answer

Wat jij wilt kan inderdaad niet met HTML alleen. Je kan hiervoor denk ik het best gebruik maken van Javascript. Tenminste, zolang het geen probleem voor je is dat de verborgen tekst wel in de broncode te zien is.

Zie een werkend voorbeeld die ik voor je heb gemaakt op http://jsfiddle.net/JsJCs/

Jfiddle.net is een speeltuintje om met allerlei Javascript 'framework' te testen en voorbeelden met elkaar te delen.

Het voorbeeld dat ik heb gemaakt, maakt gebruik van jQuery, een veel gebruikte Javascript framework.

Ik heb ook een compleet code voorbeeld voor je geplakt op http://pastie.org/1753902

Als je dit voorbeeld wilt gebruiken, zul je jQuery dus moeten downloaden (zie bron) en moeten plaatsen in het absolute webserver pad /js/jquery-1.5.min.js

Ik hoop dat je iets mee kunt. Succes!

Wat is de html code voor het maken van een soort venstertje dat je open kan klikken (zie plaatje/uitleg)?

Antwoorden (2)

Weet jij het beter..?