Hur man expanderar och komprimerar en DIV i JavaScript

Div kan du gruppera element på en webbsida. Det finns två sätt att få divs på en webbsida att försvinna. Först, du en kod gör en div till ett osynligt element, eller så kan du använda kollaps. Om du helt enkelt gör en div osynlig, ett tomt utrymme finns kvar där div finns. Genom att kollapsa en div tas det tomma utrymmet bort utan att det finns något "hål" på din webbsida. Med JavaScript länkad till en knapp, du skapar dina egna divs som kollapsar och expanderar när användare klickar på knappen.

Lägg till Div på webbsidan

Steg 1

Starta Anteckningar och öppna alla dina HTML -dokument.

Steg 2

Lägg till detta block av HTML -kod i dokumentets "body" -avsnitt:

Div text

Denna kod skapar en div och en knapp. Div innehåller ett stycke med text som lyder:"Div text." Ersätt den texten med vad du vill. "Knappen" anropar en JavaScript -funktion när den klickas. Den funktionen gör att div växlar mellan ett kollapsat tillstånd och ett expanderat tillstånd.

Leta upp egenskaperna "id" och "class" i div -taggen. För att skapa en expanderande och kollapsande div, du måste ge div ett id -värde. I det här exemplet, det värdet är "MyDiv." Div har också en klassegenskap. I det här fallet, att egenskapens värde är "divVisible." Det är namnet på en CSS -klass som definieras i nästa avsnitt.

Lägg till CSS -klasser och JavaScript

Steg 1

Lägg till följande CSS -kod i dokumentets huvudhuvud: Detta skapar klassen "divVisible" och en annan klass som heter "divHidden". Klassen "divVisible" anger sitt visningsvärde till "block". "Block" -värdet gör alla HTML -element som refererar till klassen synliga och utökar den för att uppta utrymme på webbsidan. Klassen "divHidden" anger sitt visningsvärde till "ingen". Alla HTML -element som hänvisar till den klassen kollapsar och lämnar inget utrymme efter sig.

Steg 2

Lägg till den här JavaScript -koden under CSS -koden:divID -variabeln innehåller id -värdet för den div du vill komprimera och expandera. Det värdet är "MyDiv". Resten av koden hämtar divens nuvarande CSS -klassnamn och byter det varje gång koden körs. Första gången koden körs, det ändrar divens klassnamn till "divHidden". Andra gången den körs, det ändrar klassnamnet tillbaka till "divVisible".

Steg 3

Spara HTML -dokumentet, och öppna den i din webbläsare. Paragrafen som innehåller ditt stycke visas.

Klicka på knappen "Dölj/expandera". Texten faller ihop. Klicka på knappen igen för att expandera texten. Observera hur knappen och andra element under texten rör sig uppåt när texten faller ihop och rör sig nedåt när texten expanderar.

URL:https://sv.whycomputer.com/internet/1014006624.html