Tekst in HTML uitvouwen en samenvouwen

HTML 5 belooft rijke interactieve websites, maar op dit moment variëren browsers in functie-implementaties en veel bedrijven hebben nog geen browsers geïmplementeerd die compatibel zijn met de nieuwe standaard. Toch kan een rijke interactie worden geïmplementeerd met de huidige browsers. Gebruik voor degenen met een kleine JavaScript-ervaring de eigenschap innerHTML van de div-tag om contouren uit te vouwen en in te kaderen en interactieve hulp aan uw site toe te voegen.

Maak een nieuw project

Open uw favoriete webontwikkelingstool en maak een nieuwe website. De Visual Studio-hulpmiddelen van Microsoft worden hier gebruikt, omdat de WebDev-versie gratis kan worden gedownload en deze een ingebouwde webserver bevat.

Maak een nieuwe HTML-pagina

Maak een nieuwe pagina default.htm. Klik op "Project", "Item toevoegen" en kies vervolgens "HTML-pagina" en noem deze standaard.htm. Als er al een default.aspx-bestand bestaat, wis het dan. Schakel over naar HTML- of Markup-weergave en voeg de volgende code toe na de tag.

voorbeeld pagina

1? Titel 1

2? Titel 2

De h3-tag maakt een paginakop genaamd "Voorbeeldpagina", gevolgd door twee regels van een omtrek. Elke regel begint met een nummer, een vraagteken en een titel. De vraagtekens zijn omgeven door een anker ((tags die ze veranderen in klikbare links.) Na elke titel hebben we een lege div-tag toegevoegd waar aanvullende tekst kan worden ingevoegd.

Voeg JavaScript toe

Voeg als volgt een JavaScript-functie toe die kan worden geactiveerd door elk van de vraagtekenkoppelingen:

Elk van de links roept de JavaScript-functie help_click aan, geeft de div-tagname en wat extra tekst door. De functie test eerst om te zien of de div-tag leeg is (div.innerHTML == ""). Als de tag leeg is, voegt de code een regeleinde toe (

), drie blanco tekens () gevolgd door de tekst. Als de div al tekst bevat, wordt de markering binnen de div-tag gewist.

Test de nieuwe pagina

Test de code. Klik voor Visual Studio op de toets "F5". Wanneer de pagina verschijnt, klikt u op een van de vraagtekens. De eerste keer dat de link in regel 1 wordt geklikt, wordt de omtrek uitgebreid met de tekst "Aanvullende tekst voor titel 1". De tweede keer dat op de link wordt geklikt, verdwijnt de tekst. Met een beetje creatieve code kan dezelfde techniek worden gebruikt om boomaanzichten, complexe contouren te maken of helptekst weer te geven en te verbergen.