Outra maneira que penso que funcione e que acaso precise se o botão mostrar/esconder estiver em outro elemento o que impossibilitará de usar o ~
como no exemplo com :checked
, seria usar o :target
.
O :target
funciona baseado na hash da URL da página atual, um exemplo de uso aplicado ao elemento pai (pode aplicar ao body, mas vai ficar um pouco mais limitado se tiver mais de um elemento)
um exemplo simples seria:
- Se a URL for algo como
http://foo.bar/pagina
- Se a URL for algo como
http://foo.bar/pagina#box-1
irá exibir os elementos com class="mostrar"
dentro do <div id="box-1"></div>
, irá ocultar o link com class="show-action"
e irá exibir o link class="hide-action"
que estiverem dentro do <div id="box-1"></div>
- Se a URL for algo como
http://foo.bar/pagina#box-2
irá exibir os elementos com class="mostrar"
dentro do <div id="box-2"></div>
, irá ocultar o link com class="show-action"
e irá exibir o link class="hide-action"
que estiverem dentro do <div id="box-2"></div>
Você poderá criar mais DIVs com mais IDs, é importante lembrar que os IDs em HTML (isso é do HTML e não relacionado ao CSS da minha resposta) não podem nunca se repetir, ID = identidade, ou seja cada um tem o seu.
O botão "mostar URL" no exemplo abaixo é só pra poder ver a URL dentro do Stack Snippet, pois ele roda em um IFRAME
Um exemplo de teste:
/*
Oculta os elementos com a classe .mostrar
Oculta os elementos com a classe .hide-action
*/
#box-1 .mostrar,
#box-1 .hide-action,
#box-2 .mostrar,
#box-2 .hide-action {
display: none;
}
/*
conforme a HASH atual:
Mostra os elementos com a classe .mostrar
Mostra os elementos com a classe .hide-action
*/
#box-1:target .mostrar,
#box-1:target .hide-action,
#box-2:target .mostrar,
#box-2:target .hide-action {
display: block;
}
/*
conforme a HASH atual:
Oculta os elementos com a classe .action-action
*/
#box-1:target .show-action,
#box-2:target .show-action
{
display: none;
}
<div id="box-1">
<div class="foo">
<div class="bar">
<div class="mostrar">Olá Stack Overflow</div>
</div>
</div>
<div class="baz">
<a class="show-action" href="#box-1">Mostrar</a>
<a class="hide-action" href="#">Ocultar</a>
</div>
</div>
<div id="box-2">
<div class="foo">
<div class="bar">
<div class="mostrar">Olá Francis Vagner da Luz</div>
</div>
</div>
<div class="baz">
<a class="show-action" href="#box-2">Mostrar</a>
<a class="hide-action" href="#">Ocultar</a>
</div>
</div>
<button onclick="console.log(location.href);">Mostrar url</button>