Mostrar/Ocultar Div onClick en JavaScript
-
Mostrar y ocultar un HTML
divusando CSS -
Mostrar y ocultar un HTML
divutilizando la funciónonclick()y JavaScript
Este artículo discutirá el uso de CSS o la función onclick() para mostrar y ocultar un div HTML en JavaScript.
Mostrar y ocultar un HTML div usando CSS
Un div es una etiqueta y elemento de HTML para definir la sección o divisiones de una página web, y también podemos agregar cualquier contenido dentro de las etiquetas div. Un div se utiliza como contenedor de elementos de HTML, y se puede asignar con CSS y personalizar con JavaScript.
Podemos alternar la sección div usando la palabra clave :target de CSS. La palabra clave :objetivo está vinculada con un elemento HTML que es el elemento de destino, y podemos cambiar sus propiedades, y las propiedades se le aplicarán cuando se haga clic en el elemento.
Por ejemplo, podemos mostrar un div específico al hacer clic en un enlace. Consideremos un ejemplo en el que tenemos tres elementos div y queremos mostrarlos cuando se hace clic en un enlace específico.
Vea el código de ejemplo y la salida a continuación.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript div show hide</title>
<style>
#html-show-hide,
#css-show-hide,
#js-show-hide {
display: none;
}
#html-show-hide:target,
#css-show-hide:target,
#js-show-hide:target {
display: block;
}
</style>
</head>
<body>
<!--Nav-Bar-->
<a href="#html-show-hide">Show HTML</a>
<a href="#css-show-hide">Show CSS</a>
<a href="#js-show-hide">Show JS</a>
<!--HTML-->
<div class="html" id="html-show-hide">
<p class="text-html" id="htmlContent">HTML div..
</p>
</div>
<!--CSS-->
<div class="css" id="css-show-hide">
<p class="text-css" id="cssContent">CSS div..
</p>
</div>
<!--JS-->
<div class="js" id="js-show-hide">
<p class="text-js" id="jsContent">JS div..
</p>
</div>
</body>
</html>
Producción:
En el código anterior, hemos utilizado la propiedad display de CSS para mostrar y ocultar un elemento div. Si queremos ocultar la sección div, tenemos que configurar display en none y mostrar la sección; tenemos que poner display en block.
Dentro de la etiqueta body, hemos creado 3 elementos div y 3 enlaces que mostrarán un div específico cuando hagamos clic en él. Cada div se ataca con un enlace separado utilizando el atributo href.
Cuando hacemos clic en un enlace, el atributo href activará el atributo CSS objetivo, que cambiará la propiedad del elemento cuyo nombre se adjunta al atributo objetivo. En el código anterior, hemos usado la etiqueta estilo para escribir CSS dentro del archivo HTML, pero también podemos crear y vincular un archivo CSS separado.
En el resultado anterior, podemos ver solo un div, que es el div de CSS porque hemos hecho clic en el segundo enlace, y si hacemos clic en otro enlace, el div actualmente visible se ocultará y el nuevo div se hará visible en la página.
Mostrar y ocultar un HTML div utilizando la función onclick() y JavaScript
En el ejemplo anterior, hemos usado el atributo objetivo de CSS para desencadenar la respuesta de un clic, pero también podemos usar la función onclick(), que llamará a una función especificada dentro del archivo JavaScript o el script Se ejecutará la etiqueta de HTML y el código dentro de la función.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript div show hide</title>
</head>
<body>
<button onclick="showHide()">Show hide</button>
<div class="html" id="show-hide">
<p>HTML div..
</p>
</div>
<script>
const element = document.getElementById("show-hide");
function showHide() {
if (element.style.display === "none") {
element.style.display = "block"; // to show the element
} else {
element.style.display = "none"; // to hide the element
}
}
</script>
</body>
</html>
Salida con espectáculo:
Salida con ocultar:
En el código HTML anterior, hemos creado una sección div con el id show-hide y un botón para llamar a la función showHide() de JavaScript, que está presente dentro de la etiqueta script. En la función showHide(), obtenemos el elemento div usando la función document.getElementById().
En primer lugar, hemos usado la instrucción if-else para verificar la visibilidad del div usando el atributo style.display, y si la propiedad display está establecida en none, tenemos que configurarla en bloquear, y si está configurado en bloquear, tenemos que configurarlo en ninguno. En la salida anterior, podemos ver un botón que alternará el div dado.
Si el div está oculto, será visible cuando pulsemos el botón. Si el div está visible, se ocultará cuando se presione el botón.
En el código anterior, hemos utilizado la etiqueta script para escribir el código JavaScript dentro del archivo HTML, pero también podemos crear y vincular un archivo JavaScript con el archivo HTML.
