Issue
Got this not throwing any error, but not changing the display
either. Beginner here, so please be patient.
function addEventListenerToMenuButtons() {
const buttonContainer = document.querySelector(".features-list");
if (buttonContainer) {
buttonContainer.addEventListener('click', function(event) {
const clickedButton = event.target.closest('.list-ul');
if (clickedButton) {
removeActiveClassFromAllButtons();
clickedButton.classList.add("activeBtn");
const buttonId = clickedButton.id;
if(buttonId === "deliverable-tracker-btn-container") {
showSectionContainer(buttonId);
} else if(buttonId === "dashboard-btn-container") {
showSectionContainer(buttonId);
}
}
});
}
}
function removeActiveClassFromAllButtons() {
const buttons = document.querySelectorAll('.list-ul.activeBtn');
buttons.forEach(function(button) {
button.classList.remove("activeBtn");
});
}
addEventListenerToMenuButtons();
function showSectionContainer(sectionId) {
const sectionContainers = document.querySelectorAll('.section-container');
const targetSection = document.getElementById(sectionId);
sectionContainers.forEach(container => {
container.style.display = container.id === sectionId ? "block" : "";
});
if (targetSection) {
targetSection.style.display = "";
}
}
<div class="side-bar">
<ul class="features-list">
<li class="features-item list-ul active" id="dashboard-btn-container">
<div style="display:inline-flex">
<button class="features-item-button">Dashboard</button>
</div>
</li>
<li class="features-item list-ul active activeBtn" id="deliverable-tracker-btn-container">
<div style="display:inline-flex">
<button class="features-item-button">Deliverable Tracker</button>
</div>
</li>
</ul>
</div>
<div class="container">
<div class="section-container" id="dashboard-container">
<div class="card" id="active-clients-card">
<div class="kpi">5</div>
<div class="label">Active Clients</div>
</div>
<div class="card" id="open-tasks-card">
<div class="kpi">4</div>
<div class="label">Open Tasks</div>
</div>
<div class="card" id="overdue-tasks-card">
<div class="kpi">2</div>
<div class="label">Overdue Tasks</div>
</div>
</div>
<div class="section-container" id="deliverable-tracker-container" style="display: none">
<h1>TESTING NEW SECTION - Deliverables</h1>
</div>
</div>
Solution
You need to
remove -btn from the id to match the div's ID
if (clickedButton) { removeActiveClassFromAllButtons(); clickedButton.classList.add("activeBtn"); const buttonId = clickedButton.id; showSectionContainer(buttonId.replace('-btn','')); }
use active OR activeBtn, not both. I removed
active
from the LIs<li class="features-item list-ul activeBtn" id="deliverable-tracker-btn-container"> <li class="features-item list-ul" id="dashboard-btn-container">
Initialise the page depending on the activeBtn
addEventListenerToMenuButtons(); let active = document.querySelector(".list-ul.activeBtn"); if (active) showSectionContainer(active.id.replace('btn-',''))
function addEventListenerToMenuButtons() {
const buttonContainer = document.querySelector(".features-list");
if (buttonContainer) {
buttonContainer.addEventListener('click', function(event) {
const clickedButton = event.target.closest('.list-ul');
if (clickedButton) {
removeActiveClassFromAllButtons();
clickedButton.classList.add("activeBtn");
const buttonId = clickedButton.id;
showSectionContainer(buttonId.replace('-btn',''));
}
});
}
}
function removeActiveClassFromAllButtons() {
const buttons = document.querySelectorAll('.list-ul.activeBtn');
buttons.forEach(function(button) {
button.classList.remove("activeBtn");
});
}
addEventListenerToMenuButtons();
let active = document.querySelector(".list-ul.activeBtn");
if (active) showSectionContainer(active.id.replace('btn-',''))
function showSectionContainer(sectionId) {
const sectionContainers = document.querySelectorAll('.section-container');
const targetSection = document.getElementById(sectionId);
sectionContainers.forEach(container => {
container.style.display = container === targetSection ? "block" : "none";
});
if (targetSection) {
targetSection.style.display = "";
}
}
li.activeBtn { background-color: red }
<div class="side-bar">
<ul class="features-list">
<li class="features-item list-ul" id="dashboard-btn-container">
<div style="display:inline-flex">
<button class="features-item-button">Dashboard</button>
</div>
</li>
<li class="features-item list-ul activeBtn" id="deliverable-tracker-btn-container">
<div style="display:inline-flex">
<button class="features-item-button">Deliverable Tracker</button>
</div>
</li>
</ul>
</div>
<div class="container">
<div class="section-container" id="dashboard-container">
<div class="card" id="active-clients-card">
<div class="kpi">5</div>
<div class="label">Active Clients</div>
</div>
<div class="card" id="open-tasks-card">
<div class="kpi">4</div>
<div class="label">Open Tasks</div>
</div>
<div class="card" id="overdue-tasks-card">
<div class="kpi">2</div>
<div class="label">Overdue Tasks</div>
</div>
</div>
<div class="section-container" id="deliverable-tracker-container" style="display: none">
<h1>TESTING NEW SECTION - Deliverables</h1>
</div>
</div>
Answered By - mplungjan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.