https://khshield.com/template/js/module/TabModule.js

1export default function TabModule() {
2    // const content = document.querySelectorAll(".career-content")
3    const readMore = document.querySelector('.global-read-more')
4    const readLess = document.querySelector('.global-read-less')
5
6    let tab = document.querySelectorAll('.tabJS');
7    if (tab) {
8        tab.forEach((t) => {
9            let tBtn = t.querySelectorAll('.tabBtn');
10            let tPanel = t.querySelectorAll('.tabPanel');
11
12            // for tab
13            if (tBtn.length !== 0 && tPanel.length === tBtn.length) {
14                tBtn[0].classList.add('active');
15                tPanel[0].classList.add('open');
16
17                for (let i = 0; i < tBtn.length; i++) {
18                    tBtn[i].addEventListener('click', showPanel);
19                    if(readLess && readLess) {
20                        $(".career-content").readmore({
21                            collapsedHeight: 400,
22                            speed: 75,
23                            moreLink: `<a href="#" class="btn-mores"><span class="text">${readMore.textContent}</span><i class="far fa-arrow-down"></i></a>`,
24                            lessLink: `<a href="#" class="btn-mores"><span class="text">${readLess.textContent}</span><i class="far fa-arrow-up"></i></a>`
25                        });
26                    }
27                    function showPanel(e) {
28                        e.preventDefault();
29                        for (let a = 0; a < tBtn.length; a++) {
30                            tBtn[a].classList.remove('active');
31                            tPanel[a].classList.remove('open');
32                        }
33                        tBtn[i].classList.add('active');
34                        tPanel[i].classList.add('open');
35                        if(readLess && readLess) {
36                            $(".career-content").readmore({
37                                collapsedHeight: 400,
38                                speed: 75,
39                                moreLink: `<a href="#" class="btn-mores"><span class="text">${readMore.textContent}</span><i class="far fa-arrow-down"></i></a>`,
40                                lessLink: `<a href="#" class="btn-mores"><span class="text">${readLess.textContent}</span><i class="far fa-arrow-up"></i></a>`
41                            });
42                        }
43                    }
44                }
45            }
46        });
47    }
48}