펼치기/접기 스크립트 봐 주세요. 채택완료
펼치기/접기를 넣으려고
그누에서 검색을 통해 다음 소스를 얻었습니다.
<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>
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
아래와 같이 바꾸어 줘보세요...
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("▶");
}
답변에 대한 댓글 1개
저도 여러 차례 시도 중 그렇게도 해 봤었는데, 작동하지 않더군요.
그렇게 넣어주게 되면, 아예 펼치기 접기가 진행되지 않습니다.ㅜㅜ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
즐거운 하루 되시기 바랍니다.^^