Open-Close Cajas

INICIO

Seguir leyendo

  Este elemento aparece y desaparece con el botón ...

CODE

        <section>
            <span>  Este elemento aparece y desaparece con el botón ...</span>
            <button id="abrir" onclick="abrir()">Seguir leyendo ...</button>
        
            <div id="texto" style="display: none;">
                <p> este elemento aparece y desaparece con el botón</p>
                    <br>
                <div class="clean"></div>
            </div>
        

            <script>
                function abrir() {
                    var x = document.getElementById("texto");
                    var boton = document.getElementById("abrir");
                    
                    x.style.display = "block"; // Mostrar el texto
                    boton.style.display = "none"; // Ocultar el botón
                }
            </script> 
            </section>

Ocultar Caja

Este elemento aparece y desaparece con el botón



CODE

        <section>
            <button id="cerrar-abrir" onclick="cerrar_abrir()"> Ocultar Caja</button>
            <button id="abrir2" onclick="cerrar_abrir()" style="display:none;"> Mostrar Caja</button>
            <div class="clean"></div>
            <div id="texto2" style="display: block;">
                    <p>Este elemento aparece y desaparece con el botón</p><br>
                
                <div class="clean"></div>
            </div>
        

            <script>
            function cerrar_abrir() {
                var x = document.getElementById("texto2");
                var y = document.getElementById("cerrar-abrir");
                var z = document.getElementById("abrir2");
                if (x.style.display === "none") {
                    x.style.display = "block";
                    y.style.display = "block";
                    z.style.display = "none";        
        
                } else {
                    x.style.display = "none";
                    y.style.display = "none";
                    z.style.display = "block";
                }
            }
            </script>
        </section>

Abrir Caja




CODE

    <section>
        <!-- bloke emergente INICIO -->
        <div id="bloke-menus">
        <button onclick="myFunction()" >Menú</button><br><br>
          <div id="div_emergente" style="display:none;">
            <!-- bloke menus INICIO -->
            <ul>
            <li><a href="">Principios de Diseño</a></li>
              <li><a href="">INICIO</a></li>
              <li><a href="">HTML</a></li>
              <li><a href="">Lenguajes de Marcas</a></li>                  
            </ul>        
            <!-- bloke menus FIN -->
        </div>
        <!-- bloke emergente FIN -->    
      
      </div>
      

      <script>
    function myFunction() {
      var e = document.getElementById("div_emergente");
      "none" === e.style.display ? e.style.display = "block" : e.style.display = "none"
    }
    </script>
    </section>

Window Open


HolaCaraCola



CODE

    <section>
        <button onclick="document.getElementById('emergente').style.display='block'" >Emergente
            

            <img style="width: 50px;height: 40px;" src="https://png.pngtree.com/element_our/png/20181205/menu-vector-icon-png_256699.jpg"/>
          </button>
      
        <div id="emergente">
          <button onclick="document.getElementById('emergente').style.display='none'">×</button>
            <h2>HolaCaraCola</h2>
          </div>
    </section>