<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slideDown slideUp</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h1>* slideDown() slideUp()</h1>
<!--
<p>
선택된 요소가 점점 위로 말려올라가면서 사라지고 점점 내려오면서 보여지게 하는 메소드
</p>
<button id="slideup">SlideUp</button>
<button id="slidedown">SlideDown</button><br>
<div id="test1">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. In ipsum quod numquam, optio voluptate necessitatibus expedita magni dolorum quis inventore sed modi facilis, maxime nesciunt labore cumque provident commodi molestiae!
</div>
<script>
$(() => {
$('#slideup').click(function() {
$('#test1').slideUp(2000);
});
$('#slidedown').click(function() {
$('#test1').slideDown(2000);
});
})
</script>
<hr>
-->
<style>
div {
background: beige;
border: 1px solid yellow;
border-radius: 10px;
width: 400px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
p {
width: 390px;
height: 50px;
border: 1px solid lightgray;
border-radius: 10px;
line-height: 50px;
padding-left: 10px;
display: none;
}
</style>
<h3>질문에 대한 답 보여주기</h3>
<div>Q. 질문입니다.</div>
<p>A. 질문에 대한 답변입니다.</p>
<div>Q. 점심시간은 언제 입니까?</div>
<p>A. 12시50분 ~ 1시50분까지 입니다.</p>
<div>Q. 쉬는시간은 언제입니까?</div>
<p>A. 매시 50분부터 10분간 휴식입니다</p>
<div>Q. 종료시간은 언제입니까?.</div>
<p>A. 오후 6시 30분 입니다.</p>
<div>Q. 본인은 열심히 공부하십니까?</div>
<p>A. 매일 2시간씩 공부하고 있습니다.</p>
<script>
$(() => {
// 1. div를 클릭하면
// 2. 선택한요소의 다음 형제( next() )를
// 3. css(display)==none 보여주고, 그렇지 않으면 숨기기
$('div').click(function() {
let $p = $(this).next();
if($p.css('display')=='none') {
$p.slideDown();
} else {
$p.slideUp();
}
})
})
</script>
</body>
</html>