Tabbed navigation. Jquery and CSS issues

Question

Issues with a script earlier discussed. Here

Basically my html is not behaving the way i want it to.

Clicking: All - Display all containers

<div class="slide">

Action Adventure - Display

<div class="slide" title="Action Adventure">

Drama - Display

<div class="slide" title="Drama">

And so on...

FIXED On initial load, load all containers only currently works on first load. After I click anather genre, then go back to 'All' it seems to behave strangly only displaying every other

New Demo Here

This issue remains Then, i noticed that after initial load, clicking down the list, it is displaying the next container down instead of the one with identical title and text. I think it has to do with the index(); but im not entirely sure. I need to get this dang thing working right.

Demo here

Thanks guys!

ps, there is other jquery to hide the the nth-child. just ignore it.

Thanks for all the help!

One last thing I need assistance with is hide all the first-child ul's when all are visible. Except the very first one under Action-adventure.

Answer 1

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

Answer 2

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 li Drama , 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! :)