DEV Community

ktr92
ktr92

Posted on

[html js] Tabs content toggle

<div data-tabs="tabs">
    <div class="tabs__nav" data-headertabs="tabs_id">
        <ul>
            <li class="active">1</li>
            <li class="">2</li>
        </ul>
    </div>
    <div class="tabs__wrapper" data-tabswrapper="tabs_id">
        <div class="tabs__content active" data-contenttabs="tabs_id">
            1
        </div>
        <div class="tabs__content " data-contenttabs="tabs_id">
            2
        </div>
    </div>
</div>

Enter fullscreen mode Exit fullscreen mode
document.querySelector('[data-headertabs]').addEventListener('click', function(e) {
    const el = e.target
    if (el.tagName === 'LI') {
        if (!el.classList.contains('active')) {
            let index = Array.from(el.parentNode.children).indexOf(el)

            document.querySelectorAll('[data-headertabs] li').forEach(item => {
                item.classList.remove('active')
            })
            el.classList.add('active')

            document.querySelectorAll('[data-contenttabs]').forEach(item => {
                item.classList.remove('active')
            })
            const items = Array.from(document.querySelector('[data-tabswrapper]').children)
            items[index].classList.add('active')
        }
    }
})
Enter fullscreen mode Exit fullscreen mode
[data-contenttabs] {
  display: none; 
}

[data-contenttabs].active {
  display: block; 
}
Enter fullscreen mode Exit fullscreen mode

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay