코드 질문입니다. 채택완료
</p>
<p><script type="text/javascript">
<!--</p>
<p>
function ShowTabex(val){
for (i=0; i<3; i++) {
var tb = document.getElementById('tab_' + i);
if (i != val){
tb.style.display = "none";
}else{
if(tb.style.display == "block"){
tb.style.display = "none";
}else{
tb.style.display = "block";
}
}
}
}</p>
<p>
//-->
</script></p>
<p> </p>
<p> </p>
<p>
<div style="text-align: right;">
<div style="border: 1px solid rgb(204, 204, 204);">
<span id=button onclick="ShowTabex('0')" style="padding: 0pt 5px; cursor: pointer;">tab_0 보기</span>
<span id=button onclick="ShowTabex('1')" style="padding: 0pt 5px; cursor: pointer;">tab_1 보기</span>
<span id=button onclick="ShowTabex('2')" style="padding: 0pt 5px; cursor: pointer;">tab_2 보기</span>
</div>
</div>
<div style="text-align: center;">
<div id="tab_0" style="width: 100%; display: none;">
tab_0의 내용입니다.
</div>
<div id="tab_1" style="width: 100%; display: none;">
tab_1의 내용입니다.
</div>
<div id="tab_2" style="width: 100%; display: none;">
tab_2의 내용입니다.
</div>
</div>
<div style=height:100px;background:#000></div></p>
<p>
오전에 도움을 받아 구성된 위 소스는 링크를 클릭하면 각 div가 보였다가 숨겨지는 코드입니니다.
div가 보여질때 그냥 보이는게 아니라 아래로 슬라이드 되면서 보여지게 하고 싶은데요.
구글링을 열심히 했는데 slideToggle() 이라는 함수가 있더라고요.
그런데 적용에 실패해서 도움을 구합니다.
휴일 쉬시는데 죄송합니다.
답변 2개
아래 내용 복사해서 실행해보세요
<script src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
<!--
function ShowTabex(idx){
$('.tab').hide();
$('#tab_' + idx).slideToggle();
}
//-->
</script>
<div style="text-align: right;">
<div style="border: 1px solid rgb(204, 204, 204);">
<span id=button onclick="ShowTabex('0')" style="padding: 0pt 5px; cursor: pointer;">tab_0 보기</span>
<span id=button onclick="ShowTabex('1')" style="padding: 0pt 5px; cursor: pointer;">tab_1 보기</span>
<span id=button onclick="ShowTabex('2')" style="padding: 0pt 5px; cursor: pointer;">tab_2 보기</span>
</div>
</div>
<div style="text-align: center;">
<div id="tab_0" class="tab" style="width: 100%; display: none;">
tab_0의 내용입니다.
</div>
<div id="tab_1" class="tab" style="width: 100%; display: none;">
tab_1의 내용입니다.
</div>
<div id="tab_2" class="tab" style="width: 100%; display: none;">
tab_2의 내용입니다.
</div>
</div>
<div style=height:100px;background:#000></div>
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
주신 소스를 웹에서 실행시켜 보니 슬라이드는 잘 되는데요. 원본처럼 해당 부모링크를 한번더 클릭하면 해당 내용이 닫혀야 하는데 주신 소스는 계속 아래로 열리네요. 닫히게 하는 방법이 있을까요?