need to jump to a tab but also opening it

Highlighted
Tourist
5 0 2

Hi, i am trying from all my ressources to reproduce the same behavior as the shopify reviews rating widget under the product title, when you click it it will bring you directly to the tab then open it...

So i am trying to make a jump to a specific tab (Ingredients) Here is the scripts i found and tried to reproduce but without success

Here is the two:

this.scrollToReview('.prd-block_info .spr-badge', '#shopify-product-reviews');
this.scrollToIngredients('.prd-block_info .ing-call', '#ingredients');

 

For the review widget

scrollToReview: function(link, reviewID) {
      $(document).on('click', link, function() {
        var $panReview = $(reviewID),
            tabNavs = '.nav-tabs',
            tabPane = '.tab-pane',
            tabPaneM = '.panel',
            header = '.hdr';
        if ($panReview.length) {
          if ($panReview.closest(tabPaneM).length) {
            var $reviewTab = $panReview.closest(tabPaneM).find('.panel-title > a');
            $reviewTab.trigger('click');
            setTimeout(function() {
              $('html,body').animate({
                scrollTop: $reviewTab.offset().top - $(header).height()
              }, 500);
            }, 500);
          } else if ($panReview.closest(tabPane).length) {
            var tabReviewID = $panReview.closest(tabPane).attr('id'),
                reviewTabNum = $('#' + tabReviewID).index(),
                $reviewTab = $(tabNavs).find('li').eq(reviewTabNum).find('a');
            $reviewTab.trigger('click');
            $('html,body').animate({
              scrollTop: $(tabNavs).offset().top - $(header).height()
            }, 500);
          } else {
            $('html,body').animate({
              scrollTop: $panReview.offset().top - $(header).height()
            }, 500);
          }
        }
      });
    },

 

The one i reproduced

scrollToIngredients: function(link, ingredientsID) {
      $(document).on('click', link, function() {
        var $panIngredients = $(ingredientsID),
            tabNavs = '.nav-tabs',
            tabPane = '.tab-pane',
            tabPaneM = '.panel',
            header = '.hdr';
        if ($panIngredients.length) {
          if ($panIngredients.closest(tabPaneM).length) {
            var $ingredientsTab = $panIngredients.closest(tabPaneM).find('.panel-title > a');
            $ingredientsTab.trigger('click');
            setTimeout(function() {
              $('html,body').animate({
                scrollTop: $ingredientsTab.offset().top - $(header).height()
              }, 500);
            }, 500);
          } else if ($panIngredients.closest(tabPane).length) {
            var tabIngredientsID = $panIngredients.closest(tabPane).attr('id'),
                ingredientsTabNum = $('#' + tabIngredientsID).index(),
                $ingredientsTab = $(tabNavs).find('li').eq(ingredientsTabNum).find('a');
            $ingredientsTab.trigger('click');
            $('html,body').animate({
              scrollTop: $(tabNavs).offset().top - $(header).height()
            }, 500);
          } else {
            $('html,body').animate({
              scrollTop: $panIngredients.offset().top - $(header).height()
            }, 500);
          }
        }
      });
    },

 

Then my call:

<span class="ing-call" onclick="scrollToIngredients">Click to see Ingredients</span>

 

Honestly, i am not sure about what i am doing but most of time i can reach to a solution....not this time.

Thank you for expert who could help me with this! My website is almost finished, i have to get this fixed!

0 Likes
Highlighted
Tourist
5 0 2

Any ideas please ? @Jason 

Regards,

0 Likes