Div in JavaScript reduzieren oder erweitern

jQuery ist eine leichte und sehr schnelle JavaScript-Bibliothek. Es vereinfacht die Verwendung von JavaScript.

Ein div-Tag ist ein Division-Tag. Es wird verwendet, um einen Abschnitt in einem HTML-Dokument zu definieren. Es fungiert auch als Container für andere HTML-Elemente.

In diesem Tutorial werden wir ein div mit jQuery reduzieren oder erweitern.

Überprüfen Sie das unten angegebene Beispiel.

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

Der obige HTML-Code enthält einige Elemente, darunter das div-Tag. Wir manipulieren das div mit jQuery, um es kollabierbar zu machen.

In jQuery werden die Methoden show() und hide() verwendet, um beliebige Elemente in HTML ein- oder auszublenden.

Wir können diese Funktionen verwenden, um das div-Tag wie unten gezeigt zu reduzieren oder zu erweitern.

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

In diesen Funktionen können wir auch die Geschwindigkeit für das Aus- und Einblenden von Elementen mit dem Parameter speed festlegen. Wir können seinen Wert als slow, fast oder Geschwindigkeit in Millisekunden bestimmen.