1

Alguien me podría ayudar, Como podría iniciar mi web con el div oculto y cuando presione el botón lo muestr, el div con JavaScript, codigo de lo que quiero ocultar esta así:

<div class="item1">
    <div class="imgPrincipal">
      <p id="pPrincipal" ></p>
      <img id="imgPrincipal" />
    </div>
  </div>

cuando haga click en el botón me lo muestre

<div class="search">
  <input type="text" id="inpSearch" />
  <button id="btnSearch" onclick="SearchPersona()">Search</button>
</div>

ya he ocultado el div por medio de css de esta forma

.item1{ display: none }

pero no he podido hacerlo aparecer con javascript

1
  • puedes cambiar su porpiedad style con js element.style.display = none, donde element es el elemento que has obtenido mediante document.getElementById()
    – Christian
    Commented el 25 may. 2021 a las 20:13

3 respuestas 3

3

Aquí mi humilde aporte es con Javascript.

const mostrar = document.querySelector("#btnSearch");
const mensaje = document.querySelector(".item1");

mostrar.addEventListener("click", () => {
  mensaje.classList.toggle("item1");
});
.item1 {
  display: none;
}
<div class="item1">
      soy el div oculto
      <!-- aqui va la imagen que quieres -->
    </div>

    <div class="search">
      <input type="text" id="inpSearch" />
      <button id="btnSearch">Search</button>
    </div>

2
  • Buena forma, se me habia olvidado :c
    – Christian
    Commented el 25 may. 2021 a las 20:24
  • Me funciono bien lo único que no se queda con el estilo que tenia antes pero funciona es lo que ocupaba muchas gracias Commented el 25 may. 2021 a las 20:53
1

Como dije en i comentario puedes hacerlo cambiando la propiedad style del elemento de esta forma

elemento = document.getElementById("item1")

elemento.style.display = "none"

Eso ocultara el elemento, si quieres volver a mostrarlo solo lo cambias a "block".
Tambien puedes hacerlo con la propiedad visibility.

elemento = document.getElementById("item1")

elemento.style.visibility= "hidden"

Y lo muestras con elemento.style.visibility= "visible"

0

Para mostrar un div o img o lo que sea, cuando está oculto con CSS display: none;:

Con JavaScript se vuelve a mostrar lo que el CSS oculta:

  // Si es una clase
 document.querySelector(".item1")
// Si es una ID
document.getElementById("item1")

Con jQuery sería:

$(".item1").hide()

Pero hay otras opciones para hacer uso de CSS. Declaramos todo en CSS y activamos con JavaScript. Pero es más complejo

1
  • 1
    El titulo dice con vanilla javascript
    – Christian
    Commented el 25 may. 2021 a las 20:15

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.