jQuery로 link클릭시 div 보이기/숨기기 그리고 a link tag의 attribute 읽고, 바꾸기

가끔씩 링크를 클릭하면 DIV를 숨겼다 보였다 토글 시킬 필요가 있다.

더불어 animation으로 위에서 아래로 반대로 아래에서 위로 보여주었다 숨기는 에니메이션도 추가

이를 jQuery로 다루는 코드이다.

<a href="#" id="btnAll" mode="hide">전체 보기</a>

<div id="ALLPRICE" style="display:none">

어쩌고 저쩌고 jquery 

</div>

<script type="text/javascript">

$(document).ready(function() {

$('#btnAll').click(function(e) {

e.preventDefault();

if ($(this).attr("mode") == "hide") {

$("#btnAll").text("전체 숨기기");

$('#ALLPRICE').slideDown(350);

$(this).attr("mode", "show");

} else {

$("#btnAll").text("전체 보기");

$('#ALLPRICE').slideUp(350);

$(this).attr("mode", "hide");

}

});

});

</script>