Skip to content

Instantly share code, notes, and snippets.

@meleu

meleu/index.html

Last active August 11, 2023 14:19
Show Gist options
  • Save meleu/118d9c84c8b6968fe7c07526e2829639 to your computer and use it in GitHub Desktop.
Save meleu/118d9c84c8b6968fe7c07526e2829639 to your computer and use it in GitHub Desktop.
Download ZIP
Mostrar/Esconder elementos HTML usando CSS puro
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide/show elements / Pure CSS</title>
<style>
.contents,
.hide-link,
:target a.show-link {
display: none;
}
:target~.contents,
:target .hide-link {
display: block;
}
</style>
</head>
<body>
<div id="div-show-hide">
<a href="#div-show-hide" class="show-link">
Mostrar
</a>
<a id="hide" href="#hide" class="hide-link">
Esconder
</a>
</div>
<p>
Abaixo dessa linha o conteúdo será exibido/escondido.
</p>
<div class="contents">
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment