Criar uma lista em colapso por meio de código CSS puro , sem a necessidade de Java ou JavaScript no seu arquivo de origem. Ao utilizar o código de exemplo abaixo , você pode conseguir uma lista que colapsa ou expande a cada vez que você clicar no link correspondente. Quando clicar em " Fechar " a lista cai de vista e quando o link " Expandir " é clicado, e , em seguida, a lista aparece na tela. Instruções
1

Abra um programa editor de texto em seu computador e criar um novo documento em branco
2

Digite o seguinte código na parte superior do documento : . < Br >

html head
3

Insira o seguinte código abaixo da tag " " :

< estilo type = "text /css "> linha { vertical-align : top ; altura : auto importante ;} . . lista. {display: none;} show. . {display: none;} esconder : target + show de { display: inline ;} esconder : . alvo {display: none;} esconder : . . alvo ~ lista {display : inline ;} @ media print { ocultar, mostrar {display: . . none;} } < ;/head>
4

Insira o seguinte código abaixo do " " tag , que contém o conteúdo da lista e apela ao estilo CSS definida anteriormente :

body div class="row"> Expandir Fechar