Jquery click on anchor link and scroll to and open specific accordion/tab

Question

I have a set of tabs that contain content. The tabs convert to accordions on mobile. This part is already working. The first tab is the default open tab on page load. I have a jump link on the page that I'm trying to code to scroll to the tabs and open (make active) the appropriate tab.

Trying to figure out how to have a link at the top of the page jump to the accordion section and also open tab 2 data-actab-id="2"

HTML


  
  
    
    
    
    
    
    
  

  
  
    
      Description
      
      
    
    
      Specs
      
      
    
    
      Reviews
      
          
          
      
    
    
      Q&A
      
      
    
    
      Videos
      
      
    
    
      Size Chart

Javascript that controls open and closing tabs/accordions (this works)

I've tried just a basic #hash jump link that will go to the div, but since the div is inside a tab, it will only work when that tab is already open/active, and not when it's not active.

I can use a jump link to go to the outside div but that just jumps down the page and doesn't make the appropriate tab active.

Read Reviews
or
Read Reviews

with this function:

$(document).ready(function () {
  $("a.reviews").click(function (event) {
    event.preventDefault();
    $("html, body").animate(
      {
        scrollTop: $(".accordion").offset().top - 150,
      },
      500
    );
  });
});

But these solutions don't solve the issue of also opening/making the tab active. I've reviewed many other questions on here but I can't figure out how to address integrating the scroll to into my existing code of opening the tab.

imvain2 · Accepted Answer

For my answer, I'm first opening the tab, then using jquery's scrollTo to scroll to the div within the tab.

I'm passing the tab ID via a data attribute and using the HREF as the target div.

const labels = document.querySelectorAll(".accordion-item__label");
const tabs = document.querySelectorAll(".accordion-tab");

function toggleShow() {
  const target = this;
  const item = target.classList.contains("accordion-tab") ?
    target :
    target.parentElement;
  const group = item.dataset.actabGroup;
  const id = item.dataset.actabId;

  tabs.forEach(function(tab) {
    if (tab.dataset.actabGroup === group) {
      if (tab.dataset.actabId === id) {
        tab.classList.add("accordion-active");
      } else {
        tab.classList.remove("accordion-active");
      }
    }
  });

  labels.forEach(function(label) {
    const tabItem = label.parentElement;

    if (tabItem.dataset.actabGroup === group) {
      if (tabItem.dataset.actabId === id) {
        tabItem.classList.add("accordion-active");
      } else {
        tabItem.classList.remove("accordion-active");
      }
    }
  });
}

labels.forEach(function(label) {
  label.addEventListener("click", toggleShow);
});

tabs.forEach(function(tab) {
tab.addEventListener("click", toggleShow);
});

$(document).ready(function() {
      $("a.scrollTo").click(function(event) {
        let tab = $(".accordion-item[data-actab-id='" + $(this).data("actab-id") + "']");
        let target = $(this).prop("hash");
        tab.addClass("accordion-active");
        
        event.preventDefault();
        $("html, body").animate({
            scrollTop: $(target).offset().top - 150            
          },
          500
        );
      });
});

.accordion{margin-top:300px;}
#reviews{margin-top:1500px}


Read Reviews


  
  
    
    
    
    
    
    
  

  
  
    
      Description
      de
      
    
    
      Specs
      ss
      
    
    
      Reviews
      
        
        REVIEWS!
        
      
    
    
      Q&A
      
      
    
    
      Videos
      
      
    
    
      Size Chart

Jquery click on anchor link and scroll to and open specific accordion/tab

Answers (1)

Related Questions