Skip to content

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.

enter image description here

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 =

                        sideBar.querySelectorAll('.tabs_button').forEach(button => {

                        tabsContainer.querySelectorAll(`.tabs_content`).forEach(tab => {


        document.addEventListener('DOMContentLoaded', () => {
        * {box-sizing: border-box}

            display: grid;
            grid-template-columns: 150px 1fr;
            border:1px solid #cccccc;
            padding: 15px;
            margin: 0 auto;
                '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;
            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>

        <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 class="tabs_content" data-tab="2">
            <h2>Tab #2</h2>
            <p>Nunc vel risus  </p>

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


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

merci in advance



Please notice that you have a typo.

You can modify this line:


to this:


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