Show / Hide with CSS only

You can do this using the Checkbox Hack:

Basically, you connect a <label> to a <input type="checkbox" /> so by clicking <label> you change the state of the <input type="checkbox" /> , state that is directly related to CSS of a <div> , so when changing state you will be changing the css applied to that <div> .

Source: Show div on click with CSS

More details about checkbox hack: CSS Tricks

/* Checkbox Hack */
#toggle-1 {
   display:none;
}

label { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  cursor: pointer;
  padding: 5px;
}

/* CSS padrão da div */
#mostra {
   display:none;
}

/* CSS quando o checkbox está marcado */
#toggle-1:checked ~ #mostra {
   display:block;
}

<label for="toggle-1">
  Clique aqui
</label>
<input type="checkbox" id="toggle-1">
<div id="mostra">
    Olá, mundo!
</div>

Another way that I think works and what it needs if the show / hide button is in another element which will make it impossible to use ~ as in the example with :checked , would use :target . >

:target works based on the hash of the current page URL, a usage example applied to the parent element (can apply to body, but will get a little more limited if you have more than one element)

A simple example would be:

• If the URL is something like http://foo.bar/pagina
• If the URL is something like http://foo.bar/pagina#box-1 it will display elements with class="mostrar" within <div id="box-1"></div> , it will hide the link with class="show-action" and it will display the class="hide-action" link within <div id="box-1"></div>
• If the URL is something like http://foo.bar/pagina#box-2 it will display elements with class="mostrar" within <div id="box-2"></div> , it will hide the link with class="show-action" and it will display the class="hide-action" link within <div id="box-2"></div>

You can create more DIVs with more IDs, it is important to remember that the HTML IDs (this is from HTML and not related to the CSS of my answer) can not be repeated, ID = identity, that is, each has the your.

  

The "show URL" button in the example below is just to see the URL inside the Stack Snippet, because it runs in an IFRAME

A test example:

/*
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>

You will need to put another element hidden in the middle of the business, and use it. Something like;

Create a display element none, a checkbox, and with css you will get the checked ~ # element you want.

<input type="checkbox" id="nope" />
<div id="nomeDoDiv">
  Seu conteúdo <br>
  <label for="nope">Esconder</label>
</div>
<div id="nomeDoDiv2">
 <label for="nope">Mostrar</label>
</div>

#nope {
  display: none;
}
#nope:checked ~ #nomeDoDiv {
  display: none;
}
#nope:checked ~ #nomeDoDiv2 {
  display: block;
}

link