jQuery / Method / .toggle() - 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 하는 메서드

.toggle()

.toggle()은 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 합니다.

문법

.toggle( [duration ] [, complete ] )

duration

duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다.

문자로 시간을 정할 때는 따옴표 안에 문자를 넣습니다.

.toggle( 'slow' )

숫자로 시간을 정할 때는 숫자만 넣습니다.

.toggle( 600 )

complete

complete에는 지정한 요소가 나타난 다음 불러올 함수가 들어갑니다.

.toggle( function() {
  // Animation complete.
});

예제

Click to toggle을 클릭하면 문단이 사라지고, 다시 클릭하면 문단이 나타납니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      p.a {
        cursor: pointer;
        font-weight: bold;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $(document).ready( function() {
        $( 'p.a' ).click( function() {
          $( 'p.b' ).toggle( 'slow' );
        });
      });
    </script>
  </head>
  <body>
      <p class="a">Click to toggle</p>
      <p class="b">Lorem ipsum dolor.</p>
  </body>
</html>

참고

Related Posts

jQuery / Method / .click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드

jQuery / Method / .click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드

.click() .click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다. 문법 .click( handler ) 예를 들어 button 요소를 클릭했을 때 함수를 실행시키고 싶으면 다음과 같이 합니다. $( 'button' ).click( function() { // function } ); 예제 문단을 클릭하면 테두리가 생깁니다. 다시 클릭하면 테두리가 사라집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / .clone() - 선택한 요소를 복제하는 메서드

jQuery / Method / .clone() - 선택한 요소를 복제하는 메서드

.clone() .clone()은 선택한 요소를 복제합니다. 문법 .clone( ) 예를 들어 $( '.ab' ).clone().appendTo( 'h1' ); 은 ab를 클래스 값으로 가지는 요소를 복제하여 h1 요소에 넣습니다. 예제 span 요소를 복제하여 h1 태그 안에 넣습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...

jQuery / Method / .remove() - 선택한 요소를 제거하는 메서드

jQuery / Method / .remove() - 선택한 요소를 제거하는 메서드

.remove() .remove()는 선택한 요소를 HTML 문서에서 제거합니다. 문법 .remove( ) 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣습니다. 예를 들어 $( 'p' ).remove( '.rm' ); 은 클래스 값으로 rm을 가진 p 요소를 제거합니다. 다음과 같이 해도 결과는 같습니다. $( 'p.rm' ).remove(); 예제 버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거합니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

jQuery / Method / .after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.after() .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있습니다. 문법 .after( content ) 예를 들어 $( 'h1' ).after( '<p>Hello</p>' ); 는 h1 요소 뒤에 Hello를 내용으로 갖는 p 요소를 추가합니다. $( 'h1.a' ).after( $( 'p.b' ) ); 는 클래스 값으로 a를 갖는 h1 요소 뒤에 클래스 값으로 b를 갖는 ...

jQuery / Method / .add() - 요소를 추가로 선택하는 메서드

jQuery / Method / .add() - 요소를 추가로 선택하는 메서드

.add() .add()는 어떤 요소를 추가로 선택할 때 사용합니다. 문법 .add( selector ) 예를 들어 $( 'ul' ).add( 'p' ) 는 ul 요소를 선택하고, 추가로 p 요소를 선택합니다. 예제 1 li 요소를 선택하고, 추가로 p 요소를 선택한 후 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...

jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드

jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드

.empty() .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 태그를 포함한 요소 전체를 제거할 때는 .remove()를 사용합니다. 문법 .empty() 예를 들어 <h1>Lorem</h1> 일 때 $( 'h1' ).empty() 를 하면 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Plugin / jquery.mb.YTPlayer / 유튜브 영상을 배경으로 사용하게 해주는 플러그인

jQuery / Plugin / jquery.mb.YTPlayer / 유튜브 영상을 배경으로 사용하게 해주는 플러그인

컴퓨터 사양이 좋아지고 네트워크 속도가 빨라지면서, 홈페이지의 배경으로 동영상을 사용하는 곳이 많아지고 있습니다. 동영상을 배경으로 사용하는 방법은, 서버에 동영상을 올려놓고 video 태그로 넣는 방법과 유튜브에 업로드하고 불러오는 방법이 있습니다. 유튜브를 이용하면 트래픽 비용을 줄일 수 있다는 장점이 있는데, 영상 제목이나 콘트롤 바, 공유 등 불필요한 내용까지 보여준다는 단점도 있습니다. 그 단점을 ...

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

.delay() .delay()는 실행 중인 함수를 정해진 시간만큼 중지(연기) 시킵니다. 문법 .delay( duration ) duration에는 중지할 시간이 들어갑니다. 숫자로 정할 때의 단위는 1/1000초이고, slow 또는 fast로 정할 수 있습니다. slow는 600, fast는 200에 해당합니다. 예제 버튼을 클릭하면 문단이 위로 사라졌다가 1초 뒤에 아래로 내려옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인 - 클릭 시 부드럽게 이동

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인 - 클릭 시 부드럽게 이동

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. 목차 클릭 시 해당 위치로 부드럽게 이동(smooth scroll)하는 기능을 포함합니다. GitHub : https://github.com/jakobbossek/jquery.toc Download : https://github.com/jakobbossek/jquery.toc/archive/master.zip 기본 사용법 h 태그가 많은 HTML 문서를 만듭니다. 다음 코드를 추가하여 jQuery와 jquery.toc.js를 연결합니다. 보통 </head> 위나 </body> 위에 넣습니다. jquery.toc.js의 경로는 적절히 수정하세요. <script src="//code.jquery.com/jquery-3.5.1.min.js"></script> <script src="js/jquery.toc.js"></script> 다음 ...

jQuery / Method / .unwrap() - 선택한 요소의 상위 태그를 제거하는 메서드

jQuery / Method / .unwrap() - 선택한 요소의 상위 태그를 제거하는 메서드

.unwrap() .unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예를 들어 $( 'h1' ).unwrap(); 은 h1 요소의 바로 상위의 태그를 제거합니다. 예제 1 h1 요소의 상위 태그인 div 태그를 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...

jQuery 강좌