Recolher ou expandir uma div em JavaScript

jQuery é uma biblioteca javascript leve e muito rápida. Isso simplifica o uso de JavaScript.

Uma marca div é uma marca de divisão. É usado para definir uma seção em um documento HTML. Ele também atua como um contêiner para outros elementos HTML.

Neste tutorial, recolheremos ou expandiremos um div usando jQuery.

Verifique o exemplo abaixo.

<fieldset class="click" >
  <legend class="buttonMain" style="cursor: pointer">Expand</legend>
<div class="content" style="display:none">
  <p>Lorem ipsum...</p>
</div>

O código HTML acima contém alguns elementos, incluindo a tag div. Estamos manipulando o div usando jQuery para torná-lo recolhível.

Em jQuery, os métodos show() e hide() são usados para mostrar ou ocultar qualquer elemento em HTML.

Podemos usar essas funções para recolher ou expandir a tag div conforme mostrado abaixo.

$('.buttonMain').click(function() {
  if ($(this).text() == 'Expand') {
    $('.content').show();
    $(this).text('Collapse');
  } else {
    $('.content').hide();
    $(this).text('Expand');
  }
});

Também podemos especificar a velocidade para ocultar e mostrar os elementos usando o parâmetro speed nessas funções. Podemos determinar seu valor como slow, fast ou velocidade em milissegundos.