Tabs based on CSS Grid don’t show proper content

I’m setting up a JS based tab navigation but somehow the Tab content doesnt show properly. The idea is to only show the Tab content of the active state.

I just want the Tab Content to show that belongs to the tab.

The Code looks like this:

        function setupTabs () {
            document.querySelectorAll(`.tabs_button`).forEach(button => {
                    button.addEventListener('click', () => {
                        const sideBar = button.parentElement;
                        let tabsContainer;
                        tabsContainer = document.querySelector(`section`);
                        const tabNumber = button.dataset.forTab;
                        const tabToActivate =
                            tabsContainer.querySelector(`.tabs_content[data-tab='${tabNumber}']`);

                        sideBar.querySelectorAll('.tabs_button').forEach(button => {
                            button.classList.remove("tabs_button--active");
                        });

                        tabsContainer.querySelectorAll(`.tabs_content`).forEach(tab => {
                            tab.classList.remove("tab_content--active");
                        });

                        button.classList.add("tabs_button--active")
                        tabToActivate.classList.add("tabs_content--active")

                    });
                });
        }
        document.addEventListener('DOMContentLoaded', () => {
            setupTabs();
        });

        * {box-sizing: border-box}

        .wrapper{
            display: grid;
            grid-template-columns: 150px 1fr;
            border:1px solid #cccccc;
            padding: 15px;
            margin: 0 auto;
            grid-template-areas:
                'nav main '
                'nav main'
        }

        .tabs_sidebar {
            grid-area: nav;
            display: flex;
            flex-direction: column;
            background: #cccccc;
        }

        section {
            display: flex;
            flex-direction: row;
            flex-shrink: 0;
            min-height: 400px;
        }
        .tabs_content {
            grid-area: main;
            background: #f6e3e3;
            padding-left: 15px;
            font-size: 1rem;
            display: none;
        }

        .tabs_button {
            display: block;
            padding: 10px;
            background: #eeeeee;
            border: none;
            width: 100%;
            outline: none;
            cursor: pointer;
            font-size: 1rem;
        }
        .tabs_button:active {
            background: #dddddd;
        }
        .tabs_button:not(:last-of-type){
            border-bottom: 1px solid #cccccc;
        }
        .tabs_button--active {
            font-weight: bold;
            border-right: 3px solid #009879;
            background: #dddddd;
        }
        .tabs_content--active {
            display: block;
        }

    <div class="wrapper">
        <nav class="tabs_sidebar">
            <button class="tabs_button tabs_button--active" data-for-tab="1">Tab #1</button>
            <button class="tabs_button" data-for-tab="2">Tab #2</button>
            <button class="tabs_button" data-for-tab="3">Tab #3</button>
        </nav>

        <section id="main_con" class="tabs_content tabs_content--active">
            <div class="tabs_content tabs_content--active" data-tab="1">
            <h2>Tab #1</h2>
            <p>Lorem ipsum dolor sit amet,  </p>
             </div>

            <div class="tabs_content" data-tab="2">
            <h2>Tab #2</h2>
            <p>Nunc vel risus  </p>
            </div>

            <div class="tabs_content" data-tab="3">
            <h2>Tab #3</h2>
            <p>Lorem ipsum dolor </p>
            </div>
        </section>

    </div>

I cannot find the error. Any help is much appreciated.

merci in advance

Answer

Please notice that you have a typo.

You can modify this line:

tab.classList.remove("tab_content--active");

to this:

tab.classList.remove("tabs_content--active");

and it will work as expected for toggling the xxxx-active class for the clicked button and its corresponding data tab.

Advertisement

Answer