Toggle Content

Hide and show (toggle) different content by clicking the respective link within a navigation.

JavaScript:

// Toggle Content
// 2022-02-03
const toggleContent = () => {
    const contentNav = document.querySelector('.content-nav');
    const contentNavItem = document.querySelectorAll('.content-nav a');
    const content = document.querySelectorAll('.content');

    contentNavItem.forEach((item) => {
        item.addEventListener('click', () => {
            // clear 'selected' class
            contentNavItem.forEach((item) => {
                item.classList.remove('selected');
            });

            // add appropriate 'selected' class
            item.classList.add('selected');

            content.forEach((section) => {
                // clear 'visible' class
                section.classList.remove('visible');

                // match the 'data-content-id' values between 'contentNavItem' and 'content'
                // then add appropriate 'selected' class
                if (item.dataset.contentId == section.dataset.contentId) {
                    section.classList.add('visible');

                    contentNav.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });

            item.preventDefault();
        });
    });
};
toggleContent();

HTML:

<ul class="content-nav">
    <li><a href="#" data-content-id="content-1" class="selected">Nav Item 1</a></li>
    <li><a href="#" data-content-id="content-2">Nav Item 2</a></li>
    <li><a href="#" data-content-id="content-3">Nav Item 3</a></li>
    <li><a href="#" data-content-id="content-4">Nav Item 4</a></li>
    <li><a href="#" data-content-id="content-5">Nav Item 5</a></li>
</ul>

<div class="content visible" data-content-id="content-1">
    <p>Content 1</p>
</div>

<div class="content" data-content-id="content-2">
    <p>Content 2</p>
</div>

<div class="content" data-content-id="content-3">
    <p>Content 3</p>
</div>

<div class="content" data-content-id="content-4">
    <p>Content 4</p>
</div>

<div class="content" data-content-id="content-5">
    <p>Content 5</p>
</div>

CSS:

/* Content Navigation
========================================================================== */
.content-nav {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1em;
	margin: 0 0 4em 0;
	padding: 0;

	li {
		list-style: none;

		a {
			display: block;
			padding: 1em 0.2em;
			border: 2px solid #000;
			color: #000;
			font-size: 1rem;
			font-weight: 600;
			text-align: center;
			text-decoration: none;
			text-transform: uppercase;

			&.selected,
			&:hover,
			&:focus {
				background: #000;
				color: #fff;
			}

			&.selected {
				cursor: pointer;
			}
		}
	}
}

/* Content
========================================================================== */
.content {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity 1s ease;

	&.visible {
		opacity: 1;
		max-height: 99999px;
		min-height: 50vh;
		transition: all 1s ease;
	}
}

CodePen