Submenu not opening on clicking arrow button , instead opens on clicking on the li tag i.e services

Question

On clicking the arrow button it shows no action, however on clicking services it opens up. Well, what I want is to open on clicking the arrow button as well as service i.e. li tag. And also on clicking the arrow button, when the show class is active the caret or angle down button should horizontally rotate 180 deg. These are the two things I want in my work, let me clarify again.

On clicking the arrow button submenu should appear.
Rotation of arrow button 180deg when the submenu is open.

Link to my work is: https://codepen.io/TA0011/pen/yLjWwGQ

//for sidebar
const sidebar = document.querySelector('#mySidebar')

const toggle = document.querySelector('#sidebar-toggle')

toggle.addEventListener('click', toggleSidebar)

function toggleSidebar(e) {
  toggle.classList.toggle('open')
  sidebar.classList.toggle('open');
}
//for sidebar

//for sidebar submenu
const caretButton = document.querySelectorAll(".caret");

caretButton.forEach((el) =>
  el.addEventListener("click", (event) => {
    const subMenu = event.target.parentElement.querySelector(".sub-menu");
    subMenu.classList.toggle("show");
  })
);

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  text-decoration: none;
}

header {
  height: 50px;
  width: 100%;
  background: coral;
  position: fixed;
}

header img {
  height: 40px;
  width: 40px;
  margin: 5px;
}

#sidebar-toggle {
  display: inline-block;
  cursor: grab;
  background: rgba(0, 136, 169, 1);
  border-radius: 50%;
  padding: 5px 10px;
  height: 40px;
  width: 40px;
  margin-top: 5px;
  float: right;
}

#sidebar-toggle div {
  width: 20px;
  height: 2px;
  background-color: #fff;
  margin: 6px 0;
  transition: all 0.3s ease 0s;
  cursor: grab;
}

#sidebar-toggle.open .bar4 {
  transform: translate(0, 8px) rotate(-45deg);
}

#sidebar-toggle.open .bar5 {
  opacity: 0;
}

#sidebar-toggle.open .bar6 {
  transform: translate(0px, -8px) rotate(45deg);
}

#mySidebar {
  transition: all 0.2s linear;
  transform: translateX(-250px);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 50px);
  box-sizing: border-box;
  top: 50px;
}


/* then a few properties removed and box-sizing added */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 15.625rem;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  z-index: 0;
  transition: all 0.5s ease;
}

.open.sidebar {
  display: flex;
}

.sidebar-nav {
  flex: 1;
  overflow: auto;
}

#mySidebar.open {
  transform: translateX(0);
}

.sidebar-header {
  padding: 0px;
  width: 100%;
  background: rgba(0, 136, 169, 1);
  height: 3rem;
}

.sidebar-header .profile {
  display: flex;
  color: #fff;
}

.profile .profile-image img {
  flex-wrap: wrap;
  pointer-events: none;
  border-radius: 50%;
  width: 40px;
  float: none;
  display: block;
  object-fit: fill;
  height: 40px;
  margin-left: 20px;
}

.profile .profile-name {
  display: inline-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px 0 5px;
  font-size: 14px;
  font-weight: 600 !important;
}

.profile .profile-name i {
  margin: -2px 5px 0 2px;
  font-size: 16px;
}

.profile-stats {
  margin: 10px 0;
  color: #fff;
  font-size: 12px;
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  align-items: center;
  cursor: pointer;
}

.profile-stats .stats {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
}

#followerCount,
#mediaCount,
#followingCount {
  font-size: 10px;
}

.sidebar-nav {
  margin: 0;
  overflow: auto;
}

.sidebar-nav ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  list-style: none;
  padding: 0 15px;
  line-height: 30px;
  box-sizing: border-box;
}

.sidebar-nav ul li {
  width: 100%;
  box-sizing: border-box;
  color: #007bff;
  padding: 5px 10px;
  margin: 1px 0;
}

.sidebar-nav ul li a {
  text-decoration: none;
}

.sidebar-nav ul .active,
.sidebar-nav ul .active a .icon {
  background: #007bff;
  color: #ffffff;
  border-radius: 10px;
}

.sidebar-nav ul li:hover,
.sidebar-nav ul li:hover a .icon,
.sidebar-nav ul li:hover a {
  background: #007bff;
  color: #ffffff;
  border-radius: 10px;
}

.sidebar-nav ul li a .icon {
  color: #007bff;
  width: 30px;
  display: inline-block;
}

.sidebar-nav ul li a .caret {
  left: 90px;
  position: relative;
}

.sidebar-nav .sidebar-nav-header {
  text-transform: uppercase;
  font-size: 11px;
  margin: -0.75rem 1.5rem;
  color: #0c7db1;
}

.sidebar-footer {
  background: #FF7F50;
  text-align: center;
}

.sidebar-footer span a {
  display: block;
  padding: .5em 0;
  color: #fff;
  background: #FF7F50;
  font-weight: 600 !important;
  text-decoration: none;
}

.sidebar-footer span i {
  width: 30px;
  font-size: 16px;
}

.sidebar-nav ul .sub-menu {
  display: none;
}

.sidebar-nav ul .sub-menu.show {
  display: flex;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css">

<header>
  <img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg" class="logo" alt="Logo">
  <div id="sidebar-toggle">
    <div class="bar4"></div>
    <div class="bar5"></div>
    <div class="bar6"></div>
  </div>
</header>
<div class="sidebar" id="mySidebar">
  <div class="sidebar-header">
    <div class="profile">
      <div class="profile-image">
        <img src="https://media-exp1.licdn.com/dms/image/C560BAQHMnA03XDdf3w/company-logo_200_200/0/1519855918965?e=2147483647&v=beta&t=J3kUMZwIphc90TFKH5oOO9Sa9K59fimgJf-s_okU3zs">
      </div>
      <div class="profile-name">
        <i class="fas fa-chess-pawn"></i><span>Umann Goswami</span>
      </div>
    </div>
  </div>
  <!--sidebar-header-->
  <div class="sidebar-nav">
    <ul>
      <li class="active"><a href=""><span class="icon"><i class="fas fa-home"></i></span>Home</a></li>

      <li class="caret"><a><span class="icon"><i class="fas fa-chart-bar"></i></span>Services<span class="caret fas fa-angle-down"</a>
        <ul class="sub-menu">
          <li><a href="">Home</a></li>
          <li><a href="">Home</a></li>
        </ul>
      </li>

      <li><a href=""><span class="icon"><i class="fas fa-pen-nib"></i></span>Home</a>
      </li>

      <li><a href=""><span class="icon"><i class="fas fa-file-alt"></i></span>Home</a></li>

      <li><a href=""><span class="icon"><i class="far fa-comments"></i></span>home</a></li>

      <li><a href=""><span class="icon"><i class="fas fa-cog"></i></span>home</a></li>
    </ul>
    <div class="sidebar-nav-header">
      Admin
    </div>
    <ul>
      <li><a href=""><span class="icon"><i class="fas fa-users"></i></span>home</a></li>

    </ul>
    <div class="sidebar-nav-header">
      Profile
    </div>

    <ul>
      <li><a href=""><span class="icon"><i class="fas
             fa-user"></i></span>home</a></li>
      <li><a href=""><span class="icon"><i class="fas fa-user-edit"></i></span>Home</a></li>
    </ul>

    <div class="sidebar-nav-header">
      Analysis
    </div>

    <ul>
      <li><a href=""><span class="icon"><i class="fas fa-user"></i></span>Home</a></li>
      <li><a href=""><span class="icon"><i class="fas fa-user-edit"></i></span>Home</a></li>
    </ul>
  </div>
  <!--sidebar-nav-->
  <div class="sidebar-footer">
    <span><a href=""><i class="fas fa-power-off"></i>Logout</span></a>
  </div>
</div>
<!--sidebar-->

[`event.target` => `event.currentTarget`](https://stackoverflow.com/questions/10086427/what-is-the-exact-difference-between-currenttarget-property-and-target-property). — Lain, Oct 31 '22 at 13:10
problem is when i add another submenu link it opens first one. See link https://codepen.io/TA0011/pen/yLjWwGQ — , Oct 31 '22 at 14:32
Yes, because of your element structure. Should probably change `event.currentTarget.parentElement.querySelector(".sub-menu");` to `event.currentTarget.querySelector(".sub-menu");` - without the `parentElement`. — Lain, Oct 31 '22 at 14:33

score 0 · Answer 1 · answered Oct 31 '22 at 13:56

can make some changes:

const caretButton = document.querySelectorAll(".list-item");

caretButton.forEach((el) =>
  el.addEventListener("click", (event) => {
    if (el.tagName === "LI") {
      el.querySelector(".sub-menu").classList.toggle("show")
      el.querySelector(".caret").classList.toggle("rotated")
    }
  })
);

.rotated {
  transform: rotate(180deg)
}

<li class="list-item">
  <span class="icon">
    <i class="fas fa-chart-bar"></i>
  </span>Services
  <span class="caret fas fa-angle-down" />
  <ul class="sub-menu">
    <li><a href="">Home</a></li>
    <li><a href="">Home</a></li>
  </ul>
</li>

Your HTML was with little mistakes and added one class 'rotated' and modified JS because there was a mistake when submenu was undefined because of parentElement attribute

not working...see my work on codepen. – Oct 31 '22 at 14:24 — , Oct 31 '22 at 14:24
my code works and what you do is multiplying the mistakes – Redskinsjo Oct 31 '22 at 15:06 — Redskinsjo, Oct 31 '22 at 15:06

Submenu not opening on clicking arrow button , instead opens on clicking on the li tag i.e services

1 Answers1