5

quiero ocultar y mostrar un div usando un boton solo con html y css, sin java Script

<div id="ocultar">
     <!-- content(); -->
</div>
8
  • 3
    Puedes hacerlo con etiquetas de css como :hover aqui un ejemplo el 4 nov. 2019 a las 16:08
  • 1
    Hola @NicolasOñate como aria para usar solo un boton y sin hover el 4 nov. 2019 a las 16:14
  • 1
    Pues ya eso, sin javascript escapa de mi entendimiento, ya que es lo mas sencillo, tal vez puedas usar scss el 4 nov. 2019 a las 16:29
  • 2
    @ordago por que estoy haciendo una web en AMP y no acepta javascript por eso quiero hacerlo con css puro o html el 4 nov. 2019 a las 16:46
  • 2
    Si es así, te recomiendo que añadas el tag amp a la pregunta (o los tags que puedan estar relacionados: por ejemplo email?), ya que puede haber gente que pilote de esos temas y esté suscrita a esos tags. Así tu pregunta llega a más gente.
    – ordago
    el 4 nov. 2019 a las 16:57

2 respuestas 2

5

Eso se realiza mediante el evento on=tap

Te dejo este código con ejemplo de mostrar y ocultar

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title> Eventos con Botones</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <link rel="canonical" href="https://codepen.io/difros/pen/zYxJRyM">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  
</head>
  
<body>
 <button id="btn_ver" class="button" on="tap:div_contenido.show">Ver Contenido</button> 
<button id="btn_ocultar" class="button" on="tap:div_contenido.hide">Ocultar Contenido</button>
   
<br><br><div id="div_contenido" hidden>Contenido</div>
</body>
</html>

Y también lo podés ver aquí: Probalo en Codepen

Saludos!

0

Te pongo el código y luego te explico:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #ocultar {
            display: none;
        }
        
        #chk:checked + #ocultar {
            display: block;
        }
    </style>
</head>
<body>
   <button><label for="chk">clic</label></button>
    <input type="checkbox" id="chk">
    <div id="ocultar">
      <!-- content(); -->
     Contenido
    </div>    
    
</body>
</html>

En resumen para poder mostrar y ocultar un div (o lo que sea) con css has de usar la pseudoclase ::checked sobre un input de tipo checkbox:

  1. Crea el <input type="checkbox" id="chk"> justo encima del div que quieras hacer aparecer y desaparecer
  2. Relacionamos el botón con el checkbox a través de una etiqueta <label for="chk">
  3. mediante el selector #chk:checked + #ocultar le decimos que cuando el checkbox esté chequeado el hermano siguiente #ocultar (eso se lo decimos con el +) se muestre.
  4. Al input le puedes poner un display: none; para que no se vea el "cuadrito" y es igual de efectivo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.