가로 아코디언 튜토리얼 CSS 문제 나는 생각한다

Question

나는이 아코디언을 만드는 방법에 대해이 튜토리얼을 따라왔다. tutorial here 나는 코드를 읽고 거의 가지고있는 것을 가지고있다. 내가 생각하는 내 문제는 내 CSS를, 당신이 탭을 클릭하면 마지막 패널 animates하지만 다음 패널이 아래로 떨어지면 애니메이트하지 않을 수 있습니다 누군가 내게 뭐가 잘못 나에게 내 CSS 또는 뭔가 jQuery 보여줄 수있다 당신이 나에게 어떤 도움을 줄 수 제발 여기 내 jsFiddle입니다. 나는 그 문제가 정확히 무엇인지 모르지만 왼쪽에 모든 요소를 ​​띄웠다.

.accordion { 
    width:460px; height:300px 
} 
.accordion .header { 
    width:40px; height:100% 
} 
.accordion .content{ 
     background:#dedede; height:100% 
} 
.accordion .header, accordion .content { 
    float:left; height:100%; clear:none 
} 
#tab1 { 
    background:#C90 
} 
#tab2 { 
    background:#C60 
}  
#tab3 { 
    background:#C30 
} 
#tab4 { 
    background:#C00 
} 

jQuery를

<div class="accordion" data-style="horizontal">   
    <h3 class="header" id="tab1"></h3> 
    <div class="content">Content</div> 
    <h3 class="header" id="tab2"></h3> 
    <div class="content">Content</div> 
    <h3 class="header" id="tab3"></h3> 
    <div class="content">Content</div> 
    <h3 class="header" id="tab4"></h3> 
    <div class="content">Content</div> 
</div> 

CSS :

function accordion(rate) { 
    var tab = $('.accordion').find('h3'),   
     visible = tab.next().filter(':last'), 
     width = visible.outerWidth(); 

    tab.next().filter(':not(:last)').css({'display':'none', 'width':0}); 

    tab.click(function() { 
     if(visible.prev()[0] == this) { 
      return; 
     } 
     visible.animate({width: 0}, {duration:rate}); 
     visible = $(this).next().animate({'width':width}, {duration:rate}); 
    }); 
} 

accordion(350); 

Answer 1

미안 내가 충분히 명성을하지 않아도

추신 : '볼'변수는 현재 내용 패널을 HTML입니다 이것을 설명하기 위해서.

코드를 튜토리얼 비디오의 코멘트에 링크 된 소스 코드와 비교 했습니까?

http://codecompendium.com/archives/downloads/

몇 가지 중요한 차이가 있습니다. 원래 게시물에있는 Jquery는 jsFiddle과 다릅니다.

귀하의 jQuery를 더 좋아 보일 것입니다 :

function accordion(rate) { 
var tab = $('.accordion').find('.header'),   
    visible = tab.next().filter(':last'), 
    width = visible.outerWidth(); 

tab.next().filter(':not(:last)').css({'display':'none', 'width':0}); 

tab.click(function() { 
    if(visible.prev()[0] == this) { 
     return; 
    } 
    visible.animate({width:0}, {duration:rate}); 
    visible = $(this).next().animate({width:width}, {duration:rate}); 
}); 
}; 

$(document).ready(function(){ 
    accordion(350); 
});