jQuery toogle 더보기
2021. 12. 7. 13:08ㆍStudy/jQuery
toggle(), hide(), show(), text()
＊ display:block; display:none; 대신에 show(); hide()문법을 사용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q&A</title>
<style>
*{margin: 0; padding: 0;}
body{font-family:'Spoqa Han Sans Neo'; font-size: 16px; color:#333; line-height:1.6; margin: 20px;}
a{color:inherit; text-decoration:none;}
img{vertical-align:top;}
.box{width:400px; border:1px solid #ccc; padding:10px; text-align:justify;}
.readmore{color:blue; }
.message{}
</style>
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/jquery-migrate-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$('.message').hide();
$('.readmore').toggle(function(){
// 홀수번째 클릭 시
$('.message').show();
//$('.message').css('display','block'); // 같은 결과
$(this).text('Read Less..? ↑');
}, function(){
//짝수번째 클릭 시
$('.message').hide();
//$('.message').css('display','none'); // 같은 결과
$(this).text('Read More..? ↓');
});
});
</script>
</head>
<body>
<div class="box">
<p>‘하면 된다’라는 정신을 갖고 목표를 달성하기 위해 온힘을 기울이는 자세를 말한다.</p>
<a href="#" class="readmore">Read More... ↓</a>
<p class="message">
현대는 다른 사람들이 불가능하다고 포기해 버린 일을 험난한 여건 속에서도 강인한 정신력과 추진력으로 성공시킨 역사와 경험을 가지고 있다. 앞으로 세계 곳곳에서 사업을 수행하는데 있어서 성취해야 할 많은 과제를 과감히 헤쳐나가기 위해서는 현대인 모두가 강인한 정신과 추진력을 더욱 배양하고 체질화해야 할 것이다.
</p>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery 시각효과 (0) | 2021.12.07 |
|---|---|
| jQuery EVENT Bubbling , this (0) | 2021.12.07 |
| jQuery attr() 속성변경 (0) | 2021.12.07 |
| jQuery toggle(), hover() (0) | 2021.12.07 |
| jQuery 다중 이벤트 (0) | 2021.12.07 |
