0

Holaa, necesito esconder el div div-servicios y mostrarlo cuado haga click, pero no lo consigo.

function showHide () { 

     if (!document.getElementById("div-servicios")) {

        // Mostrar DIV.

        var div = document.createElement("div");
        div.setAttribute("id", "div-servicios");
        document.body.appendChild(div);

        var servicio1 = document.createElement("a");
        servicio1.innerHTML = "This is a paragraph.";
        servicio1.setAttribute("class","servicios");
        div.appendChild(servicio1);

        var servicio2 = document.createElement("a");
        servicio2.innerHTML = "This is a paragraph.";
        servicio2.setAttribute("class","servicios");
        div.appendChild(servicio2);

        var servicio3 = document.createElement("a");
        servicio3.innerHTML = "This is a paragraph.";
        servicio3.setAttribute("class","servicios");
        div.appendChild(servicio3);
    } else {
        if (hola = div.className = == "div-servicios")
            div.setAttribute("id", "div-servicios2"); // OCULTAR
        }
        else {
            div.setAttribute("id", "div-servicios"); // MOSTRAR
        }
    }
}
        .servicios{
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: white;
            display: block;
            transition: 0.3s;

        }
        
        #div-servicios{
            height: 100%;
            background-color:black;
            position: fixed;
            z-index: 1; 
            margin-left:250px;
            overflow-x: hidden;
            padding-top: 60px;
            transition: 1s;
            width:250px;
        }


        #div-servicios2{
            height: 100%;
            position: fixed;
            z-index: 1; 
            margin-left:0px;
            overflow-x: hidden;
            padding-top: 60px;
            transition: 1s;
            width:0px;
        }
    
<html>
    <head>
        <script type="text/javascript" src="prueba.js"></script>
    </head>
<body>
    

    <input type="button" value="Recargar" id="boton-servicio" onclick="showHide()">
</body>
</html>

Muchas gracias de antemano, saludos.

2
  • Podrías ser más especifico.
    – user166844
    Commented el 2 jul. 2020 a las 13:29
  • podrias colocar mas contenido ya que no aparese nada referente a div-servicios solo un input necesitas colocar un ejemplo minimo verificable.
    – Bryro
    Commented el 2 jul. 2020 a las 14:12

1 respuesta 1

0

Necesitas algunas modificaciones:

  • Usar solo un ID para el elemento
  • Iniciar oculto con posición negativa a la izquierda: left:-250px
  • Mostrar aplicando una clase .activo, con posición cero a la izquierda
  • Definir la variable div fuera del if, para permitir usarla posteriormente
  • Si el elemento no existe, crearlo y asignar contenido, esa parte estaba bien
  • Si el elemento existe, solo cambiar la clase div.classList.toggle('activo')

Se podría omitir el setTimeout y dejar el cambio de clase fuera del if (sin la parte del else), pero la barra aparece sin transición al crearla, hay que darle un poco de tiempo al navegador para que renderice el nuevo elemento y pueda aplicar la transición.

function showHide () {
     // Definir elemento
     let div = document.getElementById("div-servicios");
     if (!div) {
        // No existe, hay que crearlo
        div = document.createElement("div");
        div.setAttribute("id", "div-servicios");
        document.body.appendChild(div);

        var servicio1 = document.createElement("a");
        servicio1.innerHTML = "This is a paragraph.";
        servicio1.setAttribute("class","servicios");
        div.appendChild(servicio1);

        var servicio2 = document.createElement("a");
        servicio2.innerHTML = "This is a paragraph.";
        servicio2.setAttribute("class","servicios");
        div.appendChild(servicio2);

        var servicio3 = document.createElement("a");
        servicio3.innerHTML = "This is a paragraph.";
        servicio3.setAttribute("class","servicios");
        div.appendChild(servicio3);
        // Retardar para que aparezca con transición
        setTimeout(showHide, 50);
    } else {
        // Mostrar u ocultar
        div.classList.toggle('activo');
    }
}
#div-servicios {
            height: 100%;
            background-color:black;
            color:white;
            position: fixed;
            z-index: 1; 
            left:-250px;
            overflow-x: hidden;
            padding-top: 60px;
            transition: 1s;
            width:250px;
            transition:all 0.5s ease;
        }
        #div-servicios.activo{
            left:0;
        }
        .servicios{
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: white;
            display: block;
        }
<input type="button" value="Recargar" id="boton-servicio" onclick="showHide()">

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.