Javascript - Toggle Multiple Classes onclick

Question

I am trying to toggle multiple classes onclick using vanilla Javascript. What i am trying to do is when a btn is clicked two classes to toggle with another two classes. I have 5 classes in total which are: .menu_btn , .main_nav, .btn_active, .container, .container_active. When i press the .menu_btn i would like the classes .main_nav to toggle with .btn_active and at the same time i would like to have the .container to toggle with .container_active. The class .container is the only one that has 5 elements of that class, the others are single. I have done this using jQuery but i would like to know the way using vanilla Javascript. Hopefully someone can help.

One thing to point out is when i console.log the .btn_active and .container_active i get back [ ] an empty array. Those 2 css classes are not assigned to any element of my project. They are existing only in the css and their purpose is for toggle.

Thanks

jQuery Code:

$(function(){

   $(".menu_btn").on("click", function(){

       $(".main_nav").toggleClass("btn_active");
       $(".container").toggleClass("container_active");

   }); 

});

Vanilla Javascript Code:

var menuBtn = document.getElementsByClassName("menu_btn");
var mainNav = document.getElementsByClassName("main_nav");
var btnActive = document.getElementsByClassName("btn_active");
var container = document.getElementsByClassName("container");
var containerActive = document.getElementsByClassName("container_active");

menuBtn.onclick = function(){

    mainNav.classList.toggle(btnActive);
    for ( index = 0; index <= container.lenght -1; index++ ){
        container[index].classList.toggle(containerActive);
    }

};

Replace container[index].classList.toggle(containerActive); with container[index].classList.toggle('containerActive'); — gurvinder372
– gurvinder372, Commented Apr 14, 2016 at 7:13
Not working @gurvinder372. Even the first class mainNav does not toggle with btnActive. Dont know what is wrong — NoName84
– NoName84, Commented Apr 14, 2016 at 7:18

hiddenuser.2524 · Accepted Answer · 2016-04-14 08:33:57Z

1

I have modified your script and created a fiddle so you see how it works: https://jsfiddle.net/eyrpdsc2/

The toggle accepts a string as a parameter, not a Node. So you need to pass 'btn_active' instead of btnActive. Also keep in mind that querySelectorAll returns a NodeList (not an array) so you cannot use forEach.

var menuBtn = document.querySelectorAll(".menu_btn");
var mainNav = document.querySelectorAll(".main_nav");
var container = document.querySelectorAll(".container");

for (var i = 0; i < menuBtn.length; ++i) {
    menuBtn[i].addEventListener('click', toggleClasses);
}

function toggleClasses() {
        var i = 0;
    for (i = 0; i < mainNav.length; ++i) {
        mainNav[i].classList.toggle('btn_active');
    }
    for (i = 0; i < container.length; ++i) {
        container[i].classList.toggle('container_active');
    }
}

answered Apr 14, 2016 at 8:33

hiddenuser.2524

5,0181 gold badge19 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Javascript - Toggle Multiple Classes onclick

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related