[jquery] hide() , show() - 숨기기 , 보이기

1. hide(),show() - 역할

hide() - div요소를 숨기고자 할 때 사용

show() - 숨긴 div 요소를 다시 보이고자 할때 사용

2. hide(),show() - 예제코드

1. 아무 작업도 하지 않은 처음 화면

◈ 코드

<style>
div {
background:#000000;
margin-bottom:20px;
width:100px;
color:#ffffff;
padding:5px;
}
</style>
<div id="div1"> 첫번째 DIV</div>
<div id="div2"> 두번째 DIV</div>
</body>
</html>

---

◈ 결과화면

---

2. 첫번째 DIV 숨기기

◈ 코드

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function () 
{
    $("#div1").hide();
});
</script>
<div id="div1"> 첫번째 DIV</div>
<div id="div2"> 두번째 DIV</div>

---

◈ 결과화면

---

3.두 DIV 숨기고 첫번째 DIV만 보이기

◈ 코드

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function () 
{
    $("#div1").hide();
    $("#div2").hide();
    
    $("#div1").show();
});
</script>
<div id="div1"> 첫번째 DIV</div>
<div id="div2"> 두번째 DIV</div>