JavaScript에서 div 축소 또는 확장

jQuery는 가볍고 매우 빠른 JavaScript 라이브러리입니다. JavaScript 사용을 단순화합니다.

div태그는 나누기 태그입니다. HTML 문서에서 섹션을 정의하는 데 사용됩니다. 또한 다른 HTML 요소의 컨테이너 역할도합니다.

이 자습서에서는jQuery를 사용하여div를 축소하거나 확장합니다.

아래 주어진 예를 확인하십시오.

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

위의 HTML 코드에는div태그를 포함한 일부 요소가 포함되어 있습니다. 접을 수 있도록jQuery를 사용하여div를 조작하고 있습니다.

jQuery에서show()및hide()메소드는 HTML의 요소를 표시하거나 숨기는 데 사용됩니다.

이러한 함수를 사용하여 아래와 같이div태그를 축소하거나 확장 할 수 있습니다.

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

이러한 함수에서speed매개 변수를 사용하여 요소를 숨기고 표시하는 속도를 지정할 수도 있습니다. 값을slow,fast또는 밀리 초 단위의 속도로 결정할 수 있습니다.