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.