코드 질문입니다.

코드 질문입니다.

QA

코드 질문입니다.

본문


<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()  이라는 함수가 있더라고요.

그런데 적용에 실패해서 도움을 구합니다.

휴일 쉬시는데 죄송합니다.

 

 

 

#js

이 질문에 댓글 쓰기 :

답변 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>

 

 

 

몰라무서워 님 답변 감사합니다.
주신 소스를 웹에서 실행시켜 보니 슬라이드는 잘 되는데요. 원본처럼 해당 부모링크를 한번더 클릭하면 해당 내용이  닫혀야 하는데 주신 소스는 계속 아래로 열리네요. 닫히게 하는 방법이 있을까요?

답변을 작성하시기 전에 로그인 해주세요.
전체 51
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT