Given this HTML structure and JS function to toggle the container display, why is this not working?

Advertisements

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

  1. 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',''));
 }

  2. 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">

  3. 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>

Leave a ReplyCancel reply