Twitter Bootstrap Question posted in

Twitter Bootstrap Tabs double click issue // Anchor Tag within tab content Issue

Intro:
This html page has 3 sections. Bootstrap Tabs as images(Top) when clicked should scroll to the tabbed content. Within each tabs tabbed content you have a (middle) section with price ranges which will filter the product blocks below (Bottom).

Issue #1
When setting anchor tags, clicking the tab it should scroll down to the tabbed content. Problem: When clicking on tabs the anchor tag scroll only works on the first tab.

Issue #2
When Double clicking the Tabs the tabbed content disappears. Bug?

Code: http://www.bootply.com/jasonethedesigner/YbdSPgyAb5#

Tags:

2

Answers


  1. 0
    • I don’t know why you are removing active class from your tab panes
      and trying to add to the current one, Bootstrap is doing it
      automatically.
    • Issue #1: If you want to do that anyway you have to change your index
      variable value, because it’s always returning 0, that’s the reason your tab panes disappear on second click, you have to use
      index() function on the parent (li element):

    var index = jQuery(this).parent().index() - 1;
    • Issue #2: It should scroll but it doesn’t because when you click on the 2nd or 3rd tab they have display: none so browser doesn’t know where to scroll, you can use this in your click event:

    var target = jQuery($(this).attr('href'));
setTimeout(function() {
  jQuery('html,body').animate({
    scrollTop: jQuery(target).offset().top
  }, 'slow');
}, 50);

    BOOTPLY

    Login or Signup to reply.
  2. 0

    for Issue #2 :
    it’s because display: none of second and third tabs!
    you can create a div in top of tabs with display: block and set that for target of scroll after click the tabs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search