[jQuery] Slide Up, Slide Down, Slide Toggle
카테고리 없음2018. 5. 9. 14:47
[jQuery] Slide Up, Slide Down, Slide Toggle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slide Test</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/myJS.js"></script>
</head>
<body>
<button class="close-btn">Slide Up</button>
<button class="open-btn">Slide Down</button>
<button class="toggle-btn">Slide Toggle</button>
<p class="slider">Lorem ipsum dolor sit amet, <br>consectetuer adipiscing elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam erat volutpat.<br> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper <br>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Ut wisi enim ad minim veniam, <br>quis nostrud exerci tation ullamcorper suscipit lobortis<br> nisl ut aliquip ex ea commodo consequat. <br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <br>sed diam nonummy nibh euismod tincidunt ut <br>laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>
myJS.js 소스코드
$(function() {
$(".close-btn").click(function() {
$(".slider").slideUp();
});
$(".open-btn").click(function() {
$(".slider").slideDown();
});
$(".toggle-btn").click(function() {
$(".slider").slideToggle();
});
});
