https://www.blackbaud.com/wp-content/plugins/blackbaud-blocks/bloc…/acf-card-horizontal-tab.js?ver=1.0.0

1document.addEventListener('DOMContentLoaded', function () {
2
3  document.querySelectorAll('.card-horizontal-tab').forEach((block) => {
4    const dropdown = block.querySelector('.dropdown-menu');
5    const dropdownBtn = block.querySelector('.mobile-tab-dropdown-toggle');
6
7    if (!dropdown || !dropdownBtn) {
8      return;
9    }
10
11    const activateTab = (target) => {
12      const tabTrigger = block.querySelector(`[data-bs-target="${target}"]`);
13
14      if (!tabTrigger) {
15        return;
16      }
17
18      if (typeof bootstrap !== 'undefined' && bootstrap.Tab) {
19        bootstrap.Tab.getOrCreateInstance(tabTrigger).show();
20      } else {
21        tabTrigger.click();
22      }
23    };
24
25    // Mobile dropdown -> tabs
26    dropdown.querySelectorAll('.dropdown-item').forEach((item) => {
27      item.addEventListener('click', function (e) {
28        e.preventDefault();
29
30        const target = this.getAttribute('href');
31
32        dropdownBtn.textContent = this.textContent;
33        activateTab(target);
34      });
35    });
36
37    // Desktop tabs -> mobile dropdown sync
38    block.querySelectorAll('[data-bs-toggle="tab"]').forEach((tabBtn) => {
39      tabBtn.addEventListener('shown.bs.tab', function (event) {
40        const activeTarget = event.target.getAttribute('data-bs-target');
41        const activeDropdownItem = dropdown.querySelector(
42          `.dropdown-item[href="${activeTarget}"]`
43        );
44
45        if (activeDropdownItem) {
46          dropdownBtn.textContent = activeDropdownItem.textContent;
47        }
48      });
49    });
50
51    const activeTab = block.querySelector('.nav-link.active');
52
53    if (activeTab) {
54      dropdownBtn.textContent = activeTab.textContent;
55    }
56  });
57
58});