CODEWITHSUNDEEP
javascriptjquery
Yunowork
Yunowork

Reputation: 345

Show hidden tabs from slider

I have a slider with more tabs then visible on the main page, so my idea is to put them in a ul set at overflow hidden. Once the last tab is active and you click next, the next tab is not displayed, the slide itself (on top) is displayed.

What should happen once the last visible tab is active (current class) and click next, the next hidden tabs should be displayed. Basically you go from seeing tab 1 to 5.5 to tab 2 to 6.5.

As you can also click a tab itself to display it's content, I would need 2 functions, one when clicking the arrows prev and next (when clicking prev the tabs should scroll back and clicking next the hidden one's should become visible).

I've tried to make these 2 functions (see code below) but they are not working.. Any ideas, is this even possible?

Demo: http://jsfiddle.net/epnDK/1/

  1. The function when clicking next and prev arrows

    $('.coda-nav-left, .coda-nav-right').click(function(e) {
  if (class == 'coda-nav-left') {
    $('.coda ul li').remove('.coda ul li:last');
  } else {
    $('.coda ul li'). remove('.coda ul li:first');
  }
});

  2. Display the next tabs after the current one

    function current() {
  var $current = $('.coda-nav ul li a.current');
  if (current) {
    //show current in the center and 2 tabs before and after current
  }
}

Upvotes: 0

Views: 242

Answers (1)

Florent
Florent

Reputation: 12420

I see two problems:

  1. You don't properly get the CSS class.

    if ($(this).hasClass('coda-nav-left')) {

    You don't remove the right elements.

    $('.coda ul').remove('li:last');

  2. I think it's not current but $current.

Upvotes: 0

Related Questions