Comprimi o espandi un div in JavaScript

jQuery è una libreria javascript leggera e molto veloce. Semplifica l’uso di JavaScript.

Un tag div è un tag di divisione. Viene utilizzato per definire una sezione in un documento HTML. Funge anche da contenitore per altri elementi HTML.

In questo tutorial, comprimeremo o espanderemo un div usando jQuery.

Controllare l’esempio fornito di seguito.

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

Il codice HTML di cui sopra contiene alcuni elementi, incluso il tag div. Stiamo manipolando il div usando jQuery per renderlo pieghevole.

In jQuery, i metodi show() e hide() vengono utilizzati per mostrare o nascondere qualsiasi elemento in HTML.

Possiamo usare queste funzioni per comprimere o espandere il tag div come mostrato di seguito.

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

Possiamo anche specificare la velocità per nascondere e mostrare gli elementi usando il parametro speed in queste funzioni. Possiamo determinare il suo valore come slow, fast o velocità in millisecondi.