Creating tabbed content with JAVASCRIPT

Question

I want to create two tabbed divs: "about us" and "contact".what I want specifically is when I click one of them, a panel retailed to the clicked tab will appear below it, the method I used it to add an event listener to the tabbed divs , then compares the id of the clicked element with the id of the related panel, and then showing the pannel by adding "active class to it", and removing the other pannel by deleting the "active" class. and somehow I couldn't accomplish it, I need some guidance. thanks in advance.

- HTML CODE :

<div class="tabbed-content">
              <ul class="tabs">
                <li class="list" data-target="#about" >About us</li>
  
                <li class="list" data-target="#contact">Contact</li>
              </ul>

              <div class="pannel" id="about">
                <p>who we are?</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
              </div>
              <div class="pannel active" id="contact">
                <p>lets keep in touch</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
              </div>

            </div>

JAVASCRIPT CODE:

const tabs=document.querySelector(".tabbed-content");
const panels =document.querySelectorAll("pannel");
tabs.addEventListener('mouseenter', function(e){
    if(e.target.className==document.querySelector(".list"))
    {
        const targetpanel=document.querySelector(e.target.dataset.target);
        panels.forEach(function(panel){
            if(panel==targetpanel){
                panel.classList.add("active")
            }
            else{
                panel.classList.remove("active")
            }
        });
    }
})

Answer 1

It looks like you've actually attached a mouseenter listener implying that you are looking for hover functionality. If this is the case it can be accomplished with pure CSS as below.

.panel {
  display: none;
}

li:hover .panel {
  display: block;
}

<div class="tabbed-content">
  <ul class="tabs">
    <li>
      <h2 class="list" data-target="#about">About us</h2>
      <div class="panel" id="about">
        <p>who we are?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </li>
    <li>
      <h2 class="list" data-target="#contact">Contact</h2>
      <div class="panel active" id="contact">
        <p>lets keep in touch</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
      </div>
    </li>
  </ul>
</div>

But if you are indeed looking for click functionality here is a simple working snippet employing onclick and classList.toggle().

function toggleActive(e) {
const targetPanelId = e.target.getAttribute('data-target');
  const targetPanel =  document.getElementById(targetPanelId);
  const activePanels = document.getElementsByClassName('active');
  if (activePanels) {
    activePanels[0].classList.toggle('active');
  }
    targetPanel.classList.toggle('active');
}

.panel {
  display: none;
}

.panel.active {
  display: block;
}

<div class="tabbed-content">
  <ul class="tabs">
    <li class="list" data-target="about" onclick="toggleActive(event)">About us</li>
    <li class="list" data-target="contact" onclick="toggleActive(event)">Contact</li>
  </ul>
  <div class="panel" id="about">
    <p>who we are?</p>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="panel active" id="contact">
    <p>lets keep in touch</p>
    <p>Cconsectetur adipisicing elit</p>
  </div>
</div>

Answer 2

this line should be const panels =document.querySelectorAll(".pannel"); to select by class you add the ".". here is a possible working version:

  const tabs = document.querySelectorAll(".list");
  const panels = document.querySelectorAll(".pannel");
  for(let listItem of tabs) {
    listItem.addEventListener("mouseenter", function (e) {
        const dataTarget = e.target.getAttribute('data-target');
        const targetpanel = dataTarget.substr(1);

        panels.forEach(function (panel) {
                if (panel.id == targetpanel) {
                    panel.classList.add("active");
                } else {
                    panel.classList.remove("active");
                }
        });
    });
  }