Hide/Show
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
<script>
$(document).ready(function () {
$("#hide").click(function () {
$("p").hide();//숨기기
});
$("#show").click(function () {
$("p").show();//보이기
});
});
</script>Hide를 눌렀을 때
Show를 눌렀을 때
사라지는 시간 설정
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").hide(1000); //1초 동안 천천히 숨기기
});
});
</script>
</body>
</html>화면 접속했을 때
1초 동안 천천히 숨겨진다.
togle(보이고 사라지고 동시 설정)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<button>Toggle between hiding and showing the paragraphs</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").toggle(); // toggle은 숨기고 보이고를 동시에 설정 가능함
});
});
</script>
</body>
</html>초기 화면
처음 버튼을 눌렀을 때 사라짐
두번째 버튼을 눌렀을 때 다시 보임
Share article