[jQuery] 보이기 및 숨기기 기능 (Show / Hide)

 HTML 요소에 대해 보이기 및 숨기기 기능을 하는 함수를 알아보자.

 어떤 요소를 미리 숨겨두고 특정한 동작을 할 때 보여주는 방법으로 다양한 실무에서 많이 사용하는 방법이다. 메소드 명칭은 show()와 hide()이다.

 아래 예제를 가지고 설명을 하도록 한다.

<tr style="display: none;" id="setItemMove">

     <th>세트상품</th>

     <td colspan="3">

          <button type="button">추가</button>

     </td>

</tr>

 우선 해당 id에 대해서 display를 숨겨둔 상태이며, 화면에 보이지 않는다. 이 때, 특정 동작을 할 때 보이도록 하고 싶으면 show() 메소드를 사용한다.

 $("#setItemMove").show();

 $("#setItemMove").hide();

 위와 같이 JavaScript 내에서 show() 함수를 사용하게 되면 실제 화면에서 정상적으로 출력이 될 것이다. 그러면 반대로 다시 숨기고 싶다면 hide() 함수를 이용하면 된다.

관련글 더 보기

 2018/09/06 - [jQuery] 라디오버튼, 체크박스 값 가져오는 방법

 2018/09/06 - [jQuery] 라디오버튼, 체크박스 갯수 확인하는 방법

↓ 공감 을 눌러주시면 블로거에게 큰 힘이 됩니다 !