펼치기/접기 스크립트 봐 주세요. 채택완료
펼치기/접기를 넣으려고
그누에서 검색을 통해 다음 소스를 얻었습니다.
</p><p><script src='<a href="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" target="_blank" rel="noopener noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js</a>"><a href="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" target="_blank" rel="noopener noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js</a></a>' type='text/javascript'></script></p><p><style type="text/css"></p><p>.UpDown { </p><p> padding-bottom: 10px;</p><p>}</p><p>.UpDown .title { </p><p> position: relative;</p><p> cursor: pointer; </p><p> background-color: #f3f3f3; </p><p> border: solid 1px #e7e7e7; </p><p> padding: 9px 7px 6px 30px; </p><p> font-family: 굴림; </p><p> font-size: 9pt; </p><p>}</p><p>.UpDown .title .arrow { </p><p> position: absolute;</p><p> top: 4px; left: 3px; </p><p> background-color: #fff; </p><p> border: 1px solid #e7e7e7; </p><p> height: 14px; </p><p> width: 20px; </p><p> color: #b0b0b0; </p><p> font-size: 7pt; </p><p> text-align: center; </p><p> padding-top: 6px; </p><p> border-radius: 10px;</p><p>}</p><p>.UpDown .content { </p><p> display: block; </p><p> font-family: 굴림; </p><p> font-size: 9pt; </p><p> padding: 5px; </p><p>} </p><p></style></p><p> </p><p><script type="text/javascript"></p><p>$(document).ready(function() {</p><p> $(".title").click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var self = $(this);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var arrow = self.find('.arrow');</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if(self.next().css("display") == "none"){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>self.next().slideDown();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>arrow.text("▶");</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>} else {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>self.next().slideUp();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>arrow.text("▼");</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p> </p><p>});</p><p></script></p><p>
아래는 펼치기/접기가 실행되는 곳입니다.
</p><p><div class="UpDown"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div class="title"><div class="arrow">▼펼치기 타이틀</p><p><span class="Apple-tab-span" style="white-space:pre"> </span><input type="checkbox" name="agree" id="agree" required class=""></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div class="content"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>펼치기 내용입니다.</p><p> </div></p><p></div></p><p><span style="font-size: 11pt; line-height: 1.5;">
현재는 페이지에 들어왔을 때 '펼치기'로 설정되어 있는 상태인데,
이것을 '접기' 상태로 바꾸고 싶습니다.
위 스크립트에서
SlideDown 과 SlideUp 위치를 바꾼다고 되는 문제가 아니더군요ㅜㅜ
어떻게 바꿔야 할 지 도움 주시면 감사하겠습니다.
답변 3개
답변에 대한 댓글 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개
저도 여러 차례 시도 중 그렇게도 해 봤었는데, 작동하지 않더군요.
그렇게 넣어주게 되면, 아예 펼치기 접기가 진행되지 않습니다.ㅜㅜ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
즐거운 하루 되시기 바랍니다.^^