document.addEventListener("DOMContentLoaded", function () {
const tabs = document.querySelectorAll(".tab");
const panes = document.querySelectorAll(".tab-pane");

tabs.forEach(tab => {
  tab.addEventListener("click", function (e) {
    e.preventDefault();

    tabs.forEach(t => t.classList.remove("active"));
    panes.forEach(p => p.classList.remove("show", "active"));

    this.classList.add("active");

    const target = this.getAttribute("data-target");
    const pane = document.querySelector(target);
    if (pane) {
      pane.classList.add("show", "active");

      // if Quick Starter, reset nested tabs
      if (target === "#quick-starter") {
        const subTabs = pane.querySelectorAll('.nav-link');
        const subPanes = pane.querySelectorAll('.tab-pane');

        subTabs.forEach(st => st.classList.remove("active"));
        subPanes.forEach(sp => sp.classList.remove("show", "active"));
        if (subTabs.length > 0) subTabs[0].classList.add("active");
        if (subPanes.length > 0) subPanes[0].classList.add("show", "active");
      }
    }
  });
});

  fetch('header.html')
.then(response => response.text())
.then(data => {
  document.getElementById('navbar-placeholder').innerHTML = data;
})
fetch("footer.html")
        .then(response => response.text())
        .then(data => {
            document.getElementById("footer-placeholder").innerHTML = data;
        })
        
});
