https://lionsystems.com.au/site/DefaultSite/skins/lion-systems/js/vendors/tab-to-dropdown.js

1// Tab Dropdown
2
3document.addEventListener("DOMContentLoaded", function () {
4   const tabsToDropdown = document.querySelector(".tabs-to-dropdown");
5
6   function generateDropdownMarkup(container) {
7      const navPills = container.querySelector(".nav-line-bottom");
8      const firstTextLink = navPills.querySelector("li:first-child a").textContent.trim();
9      const items = navPills.querySelectorAll("li");
10      let markup = `
11        <div class="dropdown d-lg-none mb-4 ">
12          <button class="btn btn-light w-100 d-flex justify-content-between dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
13            ${firstTextLink}
14          </button>
15          <div class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton">
16            ${generateDropdownLinksMarkup(items)}
17          </div>
18        </div>
19      `;
20      container.insertAdjacentHTML("afterbegin", markup);
21   }
22
23   function generateDropdownLinksMarkup(items) {
24      let markup = "";
25      items.forEach(function (item, index) {
26         const textLink = item.querySelector("a").textContent.trim();
27         markup += `<a class="dropdown-item d-inline-block " href="#!" data-index="${index}">${textLink}</a>`;
28      });
29
30      return markup;
31   }
32
33   function showDropdownHandler(e) {
34      const dropdown = e.target.closest(".dropdown");
35      const dropdownToggle = dropdown.querySelector(".dropdown-toggle");
36      const dropdownToggleText = dropdownToggle.textContent.trim();
37      const dropdownMenuLinks = dropdown.querySelectorAll(".dropdown-menu a");
38      dropdownMenuLinks.forEach(function (link) {
39         if (link.textContent.trim() === dropdownToggleText) {
40            link.classList.add("d-none");
41         } else {
42            link.classList.remove("d-none");
43         }
44      });
45   }
46
47   function clickHandler(e) {
48      e.preventDefault();
49      const link = e.target;
50      const index = link.getAttribute("data-index");
51      const text = link.textContent.trim();
52      const dropdown = link.closest(".dropdown");
53      const dropdownToggle = dropdown.querySelector(".dropdown-toggle");
54      dropdownToggle.textContent = text;
55      const parentTabs = dropdown.closest(".tabs-to-dropdown");
56      const targetTabLink = parentTabs.querySelector(`.nav-pills li:nth-child(${parseInt(index) + 1}) a`);
57      targetTabLink.click();
58   }
59
60   function shownTabsHandler(e) {
61      const tabLink = e.target;
62      const index = [...tabLink.parentNode.children].indexOf(tabLink);
63      const parentTabs = tabLink.closest(".tabs-to-dropdown");
64      const dropdownMenuLinks = parentTabs.querySelectorAll(".dropdown-menu a");
65      const dropdownToggle = parentTabs.querySelector(".dropdown-toggle");
66      dropdownToggle.textContent = dropdownMenuLinks[index].textContent;
67   }
68
69   generateDropdownMarkup(tabsToDropdown);
70
71   tabsToDropdown.querySelectorAll(".dropdown").forEach(function (dropdown) {
72      dropdown.addEventListener("show.bs.dropdown", showDropdownHandler);
73      dropdown.querySelectorAll(".dropdown-menu a").forEach(function (link) {
74         link.addEventListener("click", clickHandler);
75      });
76   });
77
78   tabsToDropdown.querySelectorAll('a[data-bs-toggle="pill"]').forEach(function (tabLink) {
79      tabLink.addEventListener("shown.bs.tab", shownTabsHandler);
80   });
81});