닫기 누르면 내용이 사라지고 열기 누르면 다시 나타나게 jquery로 구현
<방법1>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<div>닫기/열기 테스트</div>
<br/>
<a href = "javascript:void(0);" id='btn'>닫기</a>
<div id="open">
닫기/열기 내용
</div>
<script>
embed=$('#open').html();
$('#btn').click(function(){
status=$(this).text()
if(status=='닫기'){$('#open').html(''); $(this).text('열기');}
else{$('#open').html(embed); $(this).text('닫기'); }
});
</script>
</body>
</html>
<방법2> - 내용보기 클릭시 내용보여짐
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.cont {display:none}
</style>
</head>
<body>
<div class="view">
<div class="cont">내용</div>
<button type="button" class="sbn_view">내용보기</button>
</div>
<script>
$(function() {
$(".sbn_view").on("click", function() {
$(this).closest(".view").find(".cont").slideToggle();
});
});
</script>
</body>
</html>
'jscript' 카테고리의 다른 글
| [jQuery] 검색된 요소 크기 구하기. [ .width(), .height(), .outerWidth(), .outerHeight() ] (0) | 2018.01.29 |
|---|---|
| 제이쿼리로 css값 변경하기 (0) | 2018.01.29 |
| [jQuery] 모바일로 접속했는지 PC로 접속했는지 구분 방법 (0) | 2018.01.29 |
| jQuery 기초 01 (0) | 2018.01.29 |
| 마우스 오버시 나타나고 사라지는 테이블들 (0) | 2018.01.29 |