펼치기/접기 스크립트 봐 주세요.
본문
펼치기/접기를 넣으려고
그누에서 검색을 통해 다음 소스를 얻었습니다.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
.UpDown {
padding-bottom: 10px;
}
.UpDown .title {
position: relative;
cursor: pointer;
background-color: #f3f3f3;
border: solid 1px #e7e7e7;
padding: 9px 7px 6px 30px;
font-family: 굴림;
font-size: 9pt;
}
.UpDown .title .arrow {
position: absolute;
top: 4px; left: 3px;
background-color: #fff;
border: 1px solid #e7e7e7;
height: 14px;
width: 20px;
color: #b0b0b0;
font-size: 7pt;
text-align: center;
padding-top: 6px;
border-radius: 10px;
}
.UpDown .content {
display: block;
font-family: 굴림;
font-size: 9pt;
padding: 5px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".title").click(function(){
var self = $(this);
var arrow = self.find('.arrow');
if(self.next().css("display") == "none"){
self.next().slideDown();
arrow.text("▶");
} else {
self.next().slideUp();
arrow.text("▼");
}
});
});
</script>
아래는 펼치기/접기가 실행되는 곳입니다.
<div class="UpDown">
<div class="title"><div class="arrow">▼펼치기 타이틀
<input type="checkbox" name="agree" id="agree" required class="">
</div>
<div class="content">
펼치기 내용입니다.
</div>
</div>
현재는 페이지에 들어왔을 때 '펼치기'로 설정되어 있는 상태인데,
이것을 '접기' 상태로 바꾸고 싶습니다.
위 스크립트에서
SlideDown 과 SlideUp 위치를 바꾼다고 되는 문제가 아니더군요ㅜㅜ
어떻게 바꿔야 할 지 도움 주시면 감사하겠습니다.
답변 3
아래와 같이 구현해 봤습니다.
실제로 작동하는 코드입니다.
수정해서 사용하시면 됩니다.
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
.slideDownbox, .slideUpbox, .slideTogglebox{
float:left;
padding:8px;
margin:16px;
border:1px solid red;
width:200px;
height:50px;
background-color:#000000;
color:white;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="clear">
<button id=slideToggle>▼펼치기 타이틀</button>
<br/>
<div class="slideTogglebox" style="display:none;">
펼치기 내용입니다.
</div>
</div>
<script type="text/javascript">
$("#slideToggle").click(function () {
$(".slideTogglebox").slideToggle("slow",showstate);
});
function showstate(){
if($(this).attr('style')==="display: none;"){
$("#slideToggle").text('▶펼치기 타이틀');
} else {
$("#slideToggle").text('▼펼치기 타이틀');
}
}
</script>
</body>
</html>
빨간망토님 정말 감사합니다. 큰 도움이 되었습니다.
즐거운 하루 되시기 바랍니다.^^
정말 좋은 소스 입니다. 감사합니다.
아래와 같이 바꾸어 줘보세요...
if(self.next().css("display") == "none"){
self.next().slideDown();
arrow.text("▶");
} else {
self.next().slideUp();
arrow.text("▼");
}
===>
if(self.next().css("display") == "none"){
self.next().slideUp();
arrow.text("▼");
} else {
self.next().slideDown();
arrow.text("▶");
}
빨간망토님 답변 감사합니다.
저도 여러 차례 시도 중 그렇게도 해 봤었는데, 작동하지 않더군요.
그렇게 넣어주게 되면, 아예 펼치기 접기가 진행되지 않습니다.ㅜㅜ
많은 도움이 됐다니 기뻐요~~~
다시 한번 감사드립니다^^
