CODEWITHSUNDEEP
jqueryhtmlcss
ONYX
ONYX

Reputation: 5859

horizontal accordion tutorial css issue i think

I've been following this tutorial on how to make a horizontal accordion tutorial here I've gone through the code and pretty much have exactly what he has. My problem I think is my css, when you click a tab the last panel animates but the next panel drops down and doesn't animate can someone show me whats wrong either its my css or something in jquery could you give me some help with this please here is my jsFiddle . I dont know exactly what is the issue but I floated all my elements to the left.

P.S the 'visible' variable is the current content panel html:

 <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

.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:

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);

Upvotes: 1

Views: 377

Answers (1)

Mal
Mal

Reputation: 580

Sorry I don't have enough reputation to make this a comment.

Have you compared your code to the source code linked in the comment of the tutorial video?

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

There are some significant differences. The Jquery you have in your original post is different to your jsFiddle.

Your Jquery should look more like :

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);
});

Upvotes: 2

Related Questions