Mostrar ocultar divs al hacer clic en HTML y CSS sin jQuery

La guía paso a paso o código que encontrarás en este post es la solución más fácil y válida que encontramos a tus dudas o dilema.

Solución:

Utilizando label y checkbox aporte

Mantiene el elemento seleccionado abierto y conmutable.

.collapse
  cursor: pointer;
  display: block;
  background: #cdf;

.collapse + input
  display: none; /* hide the checkboxes */

.collapse + input + div
  display:none;

.collapse + input:checked + div
  display:block;

Collapse 1
 
Content 1

Collapse 2

Content 2

Utilizando label y nombrado radio aporte

Similar a las casillas de verificación, simplemente cierra la que ya está abierta.
Utilizar name="c1" type="radio" en ambas entradas.

.collapse
  cursor: pointer;
  display: block;
  background: #cdf;

.collapse + input
  display: none; /* hide the checkboxes */

.collapse + input + div
  display:none;

.collapse + input:checked + div
  display:block;

Collapse 1
 
Content 1

Collapse 2

Content 2

Utilizando tabindex y :focus

Similar a radio entradas, adicionalmente puede disparar los estados usando el Pestaña key.
Al hacer clic fuera del acordeón, se cerrarán todos los elementos abiertos.

.collapse > a
  background: #cdf;
  cursor: pointer;
  display: block;

.collapse:focus
  outline: none;

.collapse > div
  display: none;

.collapse:focus div
  display: block; 

  Collapse 1
  
Content 1....



  Collapse 2
  
Content 2....

Utilizando :target

Similar a usar radio entrada, también puede utilizar Pestaña y ⏎ keys para operar

.collapse a
  display: block;
  background: #cdf;

.collapse > div
  display:none;

.collapse > div:target
  display:block; 

  Collapse 1
  
Content 1....



  Collapse 2
  
Content 2....

Utilizando y

etiquetas (HTML puro)

Puede usar las etiquetas de detalle y resumen de HTML5 para resolver este problema sin ningún estilo CSS o Javascript. Tenga en cuenta que estas etiquetas no son compatibles con Internet Explorer.

  
Collapse 1
  
Content 1...


  
Collapse 2
  
Content 2...

Puedes usar un checkbox para simularal hacer clic con CSS:

input[type=checkbox]:checked + p 
    display: none;

JSFiddle

Selectores de hermanos adyacentes

Me gusta la respuesta de Roko y le agregué algunas líneas para que obtengas un triángulo que apunta hacia la derecha cuando el elemento está oculto y hacia abajo cuando se muestra:

.collapse  font-weight: bold; display: inline-block; 
.collapse + input:after  content: " 25b6"; display: inline-block; 
.collapse + input:checked:after  content: " 25bc"; display: inline-block; 
.collapse + input  display: inline-block; -webkit-appearance: none; -o-appearance:none; -moz-appearance:none;  
.collapse + input + *  display: none; 
.collapse + input:checked + *  display: block; 

Eres capaz de añadir valor a nuestra información aportando tu veteranía en los informes.

---

---

Utiliza Nuestro Buscador