Show/Hide with CSS only

Question

What CSS do I have to do to show or hide the elements of <div id="mostra"> by clicking the Show/Hide button on <div> fetch?

This is my HTML:

<div>
  <div id="mostra">
    <input type="text" name="buscar" id="topo-buscar" />
    <button>Buscar</button>
  </div>
</div>
<div id="buscar">
  <a href="" id="busca">
    <span></span>
    Mostrar/Esconder
  </a>
</div>

Answer 1

You can do this using the Checkbox Hack:

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

Source: Show / Hide div on click with CSS

More details about the 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>

Answer 2

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

The :target works based on the hash of the current page URL, an example of usage applied to parent element (can apply to the body, but will be 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 will display the elements with class="mostrar" within the <div id="box-1"></div>, will hide the link with class="show-action" and will display the link class="hide-action" that are inside the <div id="box-1"></div>
• If the URL is something like http://foo.bar/pagina#box-2 will display the elements with class="mostrar" within the <div id="box-2"></div>, will hide the link with class="show-action" and will display the link class="hide-action" that are inside the <div id="box-2"></div>

You can create more Divs with more Ids, it is important to remember that the Ids in HTML (this is HTML and not related to the CSS of my answer) can never repeat, ID = identity, ie each one has its own.

The "must URL" button in the example below is only to be able to see the URL inside the Stack Snippet, because it runs in an IFRAME

An example of testing:

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

Answer 3

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

Creates a None display element, 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;
}

https://jsfiddle.net/nLy9dako/