Tabbed Navigation. Jquery And Css Issues

Issues with a script earlier discussed. Here Basically my html is not behaving the way i want it to. Clicking: All - Display all containers

Action Adve

Solution 1:

Here:

Working DEMO

demo with comments

Here we are using the .index() number of a clicked li - to open a TAB whose :eq() equals this .index().

Look at this tables: Before you had this:

li index        --->    .slide index
_____________________________________

Action  | 0     --->     Action | 0 
Comedy  | 1     --->     Comedy | 1
Drama   | 2     --->     Drama  | 2
Docume. | 3     --->     Docume.| 3

And each li was opening nicely his respective tab .slide.

But than you decided to add an element .all that will open ALL your tabs, But now you have this:

li index        --->     .slide index
_____________________________________
All     | 0  (OPEN ALL)
Action  | 1     --->     Action | 0 
Comedy  | 2     --->     Comedy | 1
Drama   | 3     --->     Drama  | 2
Docume. | 4     --->     Docume.| 3

As you can see .all has not his specific 'brother' tab to open. It just has to OPEN ALL TABS! But, adding this 'extra' li element you have 'moved' the index numbers of the other li elemnts by 1 up. Now clicking the liDrama , having now the index 3 it will open the TAB that has the same index. But that's the TAB containing Documentary movies! as it still has the index number 3!

To fix that new issue you have to search for a tab that has THIS index number but -1. ( Drama index(3)-1 = open Drama tab index(2) )

$('ul.nav li').click(function() {

    var i = $(this).index()-1;  
    $('.slide:eq('+i+')').fadeIn(400);

});

Having that in mind you just have to .fadeOut() all previously opened tabs using the jQuery :visible selector. Ex:

$('.slide:visible').fadeOut(400);

That will prevent interfering your script with all other .slide.

And here is your script:

$('.slide').css({position:'relative',display:'block'});

$('ul.nav li').click(function() {
    $(this).addClass('btnSelect').siblings().removeClass('btnSelect');

    if( $(this).hasClass('all') ){
        $('.slide:visible').fadeOut(400,function(){
            $('.slide').fadeIn(400);
            $('.grid ul li:nth-child(1)').show();
        });
        return;
    }

    var i = $(this).index()-1;    
    $('.slide:visible').fadeOut(400,function(){
        $('.slide:eq('+i+')').fadeIn(400);
        $('.grid ul li:nth-child(1)').hide();
    });
});

You can use also: $('.slide').eq(i).fadeIn(400); looks prettier! :)

Solution 2:

This doesn't completely answer your question, but be sure to stop queued animations before you do something like fade out:

$(".slideMove .slide").stop(true,true).fadeOut("slow");

otherwise, clicking on a button a couple of times will cause the animation to run over and over

Share