Opret en kollapsende liste ved hjælp af ren CSS kode uden behov for Java eller JavaScript i din kildefil . Ved at bruge prøven koden nedenfor, kan du opnå en liste, der kollapser eller udvider hver gang du klikker på tilsvarende link . Når du klikker på " Skjul " listen kollapser af syne , og når " Udvid " linket er klikket , og derefter listen vises på skærmen . Instruktioner
1

Åbn en teksteditor program på din computer og oprette et nyt , tomt dokument
2

Skriv følgende kode øverst i dokumentet : . < Br >

3

Indsæt følgende kode under " " tag : Hej

< style type = "text /css "> rækken { lodret -align : top ; højde: ! auto vigtigt ;} . . listen. {display : none ;} show { display: none ;} . . hide : target + show { display : . inline ;} hide : target {display : . none; } hide : target ~ listen { display : inline ;} @ media print { skjule, vise { display : . . . none ;}} < ;/head>
4

Indsæt følgende kode under " " tag , som indeholder listen indhold og opfordrer CSS styling tidligere indstillede : Hej

5

Luk HTML-dokumentet med den rette ved at skrive nederst : Hej

< /html >
6

Gem HTML-filen i din tekst editor program. Filen skal gemmes med " HTML" eller " HTM " fil forlængelse , så det vises korrekt i en webbrowser .
7

Åbn den gemte fil i din browser og afprøve den sammenklappelige liste funktionalitet.