toggle menu with JavaScript. Target multiple variables with 1 click function

Question

I am trying to make a menu that collapses on click. I also want to add some more changes on that same function. For instance I want to change the background of another object.

In this snippet you can see it works on only the first link. The other toggleable link is not targeted.

var pill = document.querySelector(".navpill");
var sub = document.querySelector(".submenu");
pill.onclick = () => {
    sub.classList.toggle("collapse");
    pill.classList.toggle("active");
}

.mainmenu {
  background-color: #1f1f1f;
}
.navpill {
  padding: 15px;
}
.navpill.active {
  background: red;
}
.navpill a {
  text-decoration: none;
  color: white;
}
.submenu {
  display: none;
}
.submenu.collapse {
  display: block;
}

<div>
  <ul class="mainmenu">
    <li class="navpill"><a href="#">Link collapse 1</a>
        <ul class="submenu">
            <li class="navpill"><a href="#">sub Link 1</a></li>
            <li class="navpill"><a href="#">sub Link 1</a></li>
            <li class="navpill"><a href="#">sub Link 1</a></li>
            <li class="navpill"><a href="#">sub Link 1</a></li>
        </ul>
    </li>
    <li class="navpill"><a href="#">Link collapse 2</a>
        <ul class="submenu">
            <li class="navpill"><a href="#">sub Link 1</a></li>
            <li class="navpill"><a href="#">sub Link 1</a></li>
            <li class="navpill"><a href="#">sub Link 1</a></li>
        </ul>
    </li>
    <li class="navpill"><a href="#">no link</a></li>
    <li class="navpill"><a href="#">no link</a></li>
  </ul>
</div>

From a previous answer I got this piece of code which makes it work on all the links, but I have no idea how to add more var and toggles to the function.

var pills = document.querySelectorAll(".expand");

pills.forEach(function(pill) {
  pill.onclick = () => {
    var sub = pill.querySelector(".submenu");
    sub.classList.toggle("collapse");
  }
});

I tried adding this to the code but it does not work.

    var navpill = pill.querySelector(".navpill");
    navpill.classList.toggle("active");

If possible I would also like a way of clearing what has been done when clicked on the next submenu.

If I use the code above. It stays open when I click on the second link and then they are both open. I want the first one to close if the second is clicked.

obviously you need to assign onmouseover event to every navpill with document.querySelectorAll as you did with pills. no need to place it inside the pill.onclick event. do it separately — Tch
– Tch, Commented Feb 2, 2021 at 23:07
Which item are you trying to give the "active" class to? The one which was clicked? — ADyson
– ADyson, Commented Feb 2, 2021 at 23:14

ADyson · Accepted Answer · 2021-02-03 12:49:10Z

1

I think this is probably closer to what you want.

(It's unclear if you wanted the submenu items to be highlighted when they're clicked - currently, clicking them just collapses the menu anyway so you wouldn't see. Also I removed the hrefs because they aren't adding anything useful.)

var pills = document.querySelectorAll(".expand");
var subs = document.querySelectorAll(".submenu");

pills.forEach(function(pill) {
  pill.addEventListener("click", function() {
    var sub = pill.querySelector(".submenu");
    
    var alreadyOpen = false;
    if (sub.classList.contains("collapse")) alreadyOpen = true;
    
    pills.forEach(function(pill2) {
      pill2.classList.remove("active"); 
    });

    subs.forEach(function(sub2) {
      sub2.classList.remove("collapse"); 
    });

    if (!alreadyOpen) { 
      sub.classList.toggle("collapse");
      this.classList.add("active");
    }
  });
});

.expand.active {
  background-color: red;
}

.expand.active > .submenu
{
  background-color: #1f1f1f;
}

.mainmenu {
  background-color: #1f1f1f;
}

.navpill {
  padding: 15px;
  color: white;
}

.submenu {
  display: none;
}

.submenu.collapse {
  display: block;
}

<div>
  <ul class="mainmenu">
    <li class="navpill expand">Link collapse 1
      <ul class="submenu">
        <li class="navpill">sub Link 1</li>
        <li class="navpill">sub Link 1</li>
        <li class="navpill">sub Link 1</li>
        <li class="navpill">sub Link 1</li>
      </ul>
    </li>
    <li class="navpill expand">Link collapse 2
      <ul class="submenu">
        <li class="navpill">sub Link 1</li>
        <li class="navpill">sub Link 1</li>
        <li class="navpill">sub Link 1</li>
        <li class="navpill">sub Link 1</li>
      </ul>
    </li>
    <li class="navpill">no link</li>
    <li class="navpill">no link</li>
  </ul>
</div>

edited Feb 3, 2021 at 12:49

answered Feb 3, 2021 at 9:10

ADyson

62.9k16 gold badges85 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

RaRa Ritalin Over a year ago

Thank you for the answer. I allmost have the desired effect. I want to close the opened submenu when i click on the next link. Right now that happends for the active part .. but not for the collapse part.

ADyson Over a year ago

you just need another foreach on the same pattern as the one which removes the active class, but acting on the submenus instead. Hopefully you can see the approach and learn from it for future improvements. See the updated answer.

RaRa Ritalin Over a year ago

Thank you very much. I can read what is going on yet i can not write code myself. Also i don't know where to start. Can you reccommend a good book or course?

ADyson Over a year ago

Not really, because I don't know much about your current level of skill, or what you'd like to focus on particularly. And I don't know your learning style. Did you write any of the code in your question by yourself? How did you learn what you know so far? Also there are dozens of Javascript tutorials online (some free, some paid), do some research and find something which seems to match your interests / skill level / learning style.

RaRa Ritalin Over a year ago

So beside the part of code you gave in the first question i wrote all the code you see myself. I have a basic understanding of variables and for many cases i can copy/paste adjust. I learned what i know so far by doing just that. Copy and paste and adjust till it works. And from the dozens of tutorials i have seen its allways into calculating stuff. I need it for pure functionallity in my websites. And i dont have a style when it comes to learning.. i just want to learn.

|

Collectives™ on Stack Overflow

toggle menu with JavaScript. Target multiple variables with 1 click function

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related