Hvordan lage Lukk Effect i CSS

CSS-kollaps Eiendommen lar deg skjule en tabell rad, slik at brukerne kan skjule og vise deler av websiden. Du bruker Javascript for å sette dynamisk raden i tabellen til å kollapse når en knapp klikkes. CSS-kollaps effekt gjør det mer praktisk å skjule tabellradene i stedet for manuelt looping gjennom hver rad og skjule innholdet individuelt.

Bruksanvisning

1 Høyreklikk HTML-fil som inneholder tabellen, og velg "Åpne med." Klikk på HTML editor i listen over programmer å laste inn koden i editoren.

2 Opprett Javascript-kode for å utvide eller tabellradene. Følgende kode viser hvordan du kan veksle mellom de to stater:

funksjon kollaps () {
if (document.getElementById ( "table"). style.visibility == "kollaps") {
. Document.getElementById ( "table") style.visibility = "synlig";
} Else {
. Document.getElementById ( "table") style.visibility = "kollaps";
}
}

Funksjonen bruker CSS kollaps eiendommen for å skjule tabellen hvis sikten eiendommen er synlig. Hvis tabellen er allerede kollapset, blir tabellradene vist.

3 Link Javascript-funksjonen til knappen som du bruker til å kollapse og vise tabellrader. Følgende kode viser deg hvordan du oppretter på knappen for å skjule tabellen:

<Input type = "button" value = "Collapse Rader" onclick = "kollaps">