Div-elementen kunt u elementen groeperen op een webpagina. Er zijn twee manieren om het veroorzaken van div-elementen op een webpagina te verdwijnen. Eerst, u een code maakt een div-element in een onzichtbaar element, of u kunt samenvouwen. Als u gewoon een div-element onzichtbaar maken, blijft er een lege ruimte waar het div-element bestaat. Het instorten van een div-element verwijdert die lege ruimte verlaten geen "gat" in uw Web-pagina. Met behulp van JavaScript gekoppeld aan een knop, u maakt uw eigen div-elementen die het samenvouwen en uitvouwen wanneer gebruikers op de knop klikken.
Div aan webpagina toevoegen
Start Kladblok en open een van uw HTML-documenten.
Dit blok van HTML-code toevoegen aan van het document "lichaam" sectie:
Div-tekst
Deze code maakt u een div-element en een knop. Het div-element bevat een alinea met tekst die leest: "Div tekst." Tekst vervangen door dat alles wat die je wilt. De "button" roept een JavaScript-functie wanneer erop wordt geklikt. Deze functie zorgt ervoor dat de div te schakelen tussen een samengevouwen en uitgevouwen.
Zoek de 'id' en 'klasse' eigenschappen in de div-tag. Als u wilt maken een uit- en samenvouwen van div, moet u het div-element een id-waarde geven. In dit voorbeeld is die waarde "MyDiv." De div heeft ook de eigenschap van een klasse. In dit geval is de waarde van die eigenschap "divVisible." Dat is de naam van een CSS-klasse gedefinieerd in de volgende sectie.
Toevoegen van CSS klassen en JavaScript
Voeg de volgende CSS code aan van het document "hoofd" sectie:
Dit leidt tot de "divVisible" en een andere klasse met de naam "divHidden." De "divVisible" klasse stelt de weergavewaarde "blokkeren". De waarde van de "block" maakt u elk HTML-element dat verwijst naar de klasse zichtbaar en breidt het inneemt op de webpagina. De "divHidden" klasse stelt de weergavewaarde op "none". Elk HTML-element verwijzen naar die klasse wordt samengevouwen en laat geen ruimte achter.
Deze JavaScript-code onder de CSS-code toevoegen:
De divID variabele bevat de waarde van de id van het div-element dat u wilt uitvouwen en samenvouwen. Die waarde is "MyDiv." De rest van de code verkrijgt de div's huidige CSS klassenaam en schakelt het elke keer als de code wordt uitgevoerd. De eerste keer dat de code wordt uitgevoerd, verandert de naam van de klasse van de div's in "divHidden." De tweede keer dat het wordt uitgevoerd, verandert het de klassenaam weer in "divVisible."
Sla het HTML-document en open het in uw browser. De alinea waarin uw paragraaf wordt weergegeven.
Klik op de knop "Samenvouwen/uitvouwen". De tekst wordt samengevouwen. Klik op de knop om weer uit te breiden van de tekst. Merk op hoe de knop en andere elementen onder de tekst omhoog wanneer de tekst wordt samengevouwen en omlaag wanneer de tekst wordt uitgebreid.
