Contraer o expandir una división en JavaScript
jQuery
es una biblioteca javascript ligera y muy rápida. Simplifica el uso de JavaScript.
Una etiqueta div
es una etiqueta de división. Se utiliza para definir una sección en un documento HTML. También actúa como contenedor de otros elementos HTML.
En este tutorial, colapsaremos o expandiremos un div
usando jQuery
.
Consulte el ejemplo que se da a continuación.
<fieldset class="click" >
<legend class="buttonMain" style="cursor: pointer">Expand</legend>
<div class="content" style="display:none">
<p>Lorem ipsum...</p>
</div>
El código HTML anterior contiene algunos elementos, incluida la etiqueta div
. Estamos manipulando el div
usando jQuery
para hacerlo plegable.
En jQuery
, los métodos show()
y hide()
se utilizan para mostrar u ocultar cualquier elemento en HTML.
Podemos usar estas funciones para contraer o expandir la etiqueta div
como se muestra a continuación.
$('.buttonMain').click(function() {
if ($(this).text() == 'Expand') {
$('.content').show();
$(this).text('Collapse');
} else {
$('.content').hide();
$(this).text('Expand');
}
});
También podemos especificar la velocidad para ocultar y mostrar elementos usando el parámetro speed
en estas funciones. Podemos determinar su valor como slow
, fast
o velocidad en milisegundos.