I have successfully implemented a tabbed interface using CSS Grid areas. However, I am encountering an issue where the tab content is not displaying and the console shows a value of null.
Below is the code snippet that I am currently working with:
function initializeTabs() {
document.querySelectorAll('.tabs_button').forEach(button => {
button.addEventListener('click', () => {
const sidebar = button.parentElement;
const tabsContainer = document.querySelector("section");
const tabNumber = button.dataset.forTab;
const tabToActivate =
tabsContainer.querySelector('.tabs_content[data-tab="${tabNumber}"]');
console.log(tabsContainer);
console.log(tabNumber);
console.log(tabToActivate);
sidebar.querySelectorAll(".tabs_button").forEach(btn => {
btn.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', () => {
initializeTabs();
});<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, consectetur adipiscing elit. Pellentesque egestas vitae felis non rhoncus. Integer ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus </p>
</div>
<div class="tabs_content" data-tab="2">
<h2>Tab #2</h2>
<p>Nunc vel risus commodo viverra maecenas. Egestas congue quisque egestas diam. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Pharetra et ultrices neque ornare. Aliquam ultrices sagittis orci a scelerisque purus semper eget.
Viverra justo nec ultrices dui sapien eget mi proin. Lacus vel facilisis volutpat est velit egestas dui id. Magna fringilla urna porttitor rhoncus dolor purus non. Cursus risus at ultrices mi tempus imperdiet. Ornare aenean euismod elementum nisi.
Morbi blandit cursus risus at ultrices. Vel eros donec ac odio tempor orci. Netus et malesuada fames ac turpis egestas integer. Interdum varius sit amet mattis vulputate enim nulla. Nam libero justo laoreet sit. Imperdiet proin fermentum leo vel
orci porta non pulvinar. Netus et malesuada fames ac turpis egestas sed tempus urna. Integer quis auctor elit sed vulputate mi. Pellentesque sit amet porttitor eget. Tempor commodo ullamcorper a lacus vestibulum. Laoreet sit amet cursus sit amet
dictum sit amet justo. Vulputate ut pharetra sit amet aliquam. Sed sed risus pretium quam vulputate. Eget duis at tellus at urna condimentum. Sit amet consectetur adipiscing elit. A scelerisque purus semper eget duis at tellus at urna. Sapien
eget mi proin sed. </p>
</div>
<div class="tabs_content" data-tab="3">
<h2>Tab #3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas vitae felis non rhoncus. Integer ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus. Integer
ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus </p>
</div>
</section>
</div>I would greatly appreciate any assistance in resolving this issue.
Thank you for your help!