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

Question

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#

Answer 1

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.

Answer 2

• 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