코드 질문입니다.
본문
<script type="text/javascript">
<!--
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";
}
}
}
}
//-->
</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" 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>
오전에 도움을 받아 구성된 위 소스는 링크를 클릭하면 각 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>
$('.tab').hide(); <== 이거 빼보세요