CODEWITHSUNDEEP
javascripthtmlclassloopsevents
pjk_ok
pjk_ok

Reputation: 947

Triggering Two Instances of the Same Class - Javascript

I have a menu system where there are two hamburger menus. I'm trying to work out how to have JS trigger both instances of these menu icons. They both have all have the same classes.

I've tried adding a for loop, to loop through anything with the instance of the classes, but this didn't seem to work, and I'm going around in endless circles now.

With the code below I've kept the index number of the three menu bars in the first hamburger men at zero[0] so that you can see the desired effect of what happens when you click on the top hamburger menu.

I'd like it so that when I click on either hamburger menu the animation of the bars happens on both icons and the state of the blue box changes.

Any help would be amazing.

Codepen link is here: https://codepen.io/emilychews/pen/jwwVam

Code is below.

JAVASCRIPT

var container = document.getElementsByClassName('container')[0],
    bar1 = document.getElementsByClassName('bar1')[0],
    bar2 = document.getElementsByClassName('bar2')[0],
    bar3 = document.getElementsByClassName('bar3')[0],
    box = document.getElementsByClassName('box')[0],
    openMenu = false; // used for toggle

container.onclick = function(){

  if(openMenu === false) {

    bar1.classList.add("bar1_open");
    bar2.classList.add("bar2_open");
    bar3.classList.add("bar3_open");

    box.classList.add("changeBackground");

    openMenu = true;

  } else {

    bar1.classList.remove("bar1_open");
    bar2.classList.remove("bar2_open");
    bar3.classList.remove("bar3_open");

    box.classList.remove("changeBackground");

    openMenu = false;
  }

};

CSS

* {padding: 0; margin: 0;}
body {height: 200vh; font-family: arial;}
/* red square */
.container {
  margin: 10px;
  width: 100px;
  height: 100px;
  background: red;
  padding: 0px;
  position: relative;
}

/* properties for all menu bar lines */
.bar {
  position: absolute;
  height: 4px;
  width: 60px;
  background: blue;
  left: 20px;
}

/* 1st menu line */
.bar1 {
  position: absolute;
  top: 28px;
  margin: 0 auto;
  transform-origin: top right;
  transition: transform .5s;
}

/* 2nd menu line */
.bar2 {
  position: absolute;
  top: 48px;
  margin: 0 auto;
  transition: opacity 1s;
}

/* 3rd menu line */
.bar3 {
  position: absolute;
  top: 68px;
  margin: 0 auto;
  transform-origin: right bottom;
  transition: transform .5s;
}

.bar1_open{
  transform-origin: top right;
  transform: rotate(-45deg) translate(-7px, -7px);
  transition: transform .5s .1s ease-out ;
}

.bar2_open {
  opacity: 0;
  transition: opacity .2s ease-in;
}

.bar3_open {
  top: 69px;
  transform-origin: right bottom;
  transform: rotate(45deg)  translate(-7px, 7px);
  transition: transform .5s .1s ease-out;
}

.box {
  padding: 10px;
  width: 200px;
  height: 100px;
  background: blue;
  position: absolute;
  left: 300px;
  top: 30px;
  z-index: 99;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center

}

.changeBackground {
  background: red;
}

HTML

<div class="container">
  <div class="bar bar1"></div>
  <div class="bar bar2"></div>
  <div class="bar bar3"></div>
</div>

<!-- second hamburger menu button that currently has no JS  -->
<div class="container">
  <div class="bar bar1"></div>
  <div class="bar bar2"></div>
  <div class="bar bar3"></div>
</div>

<div class="box"> This toggles after 1st hamburger menu is clicked</div>

Upvotes: 0

Views: 224

Answers (2)

colby brooks
colby brooks

Reputation: 37

I have refined your code to work how you want it, i set the variables to the array of DOM Elements instead of the single one and for loop through them. EDIT: heres the updated codepen if you'd like to take a look https://codepen.io/anon/pen/LLBEeQ

var container = document.getElementsByClassName('container'),
    bar1 = document.getElementsByClassName('bar1'),
    bar2 = document.getElementsByClassName('bar2'),
    bar3 = document.getElementsByClassName('bar3'),
    box = document.getElementsByClassName('box')[0],
    openMenu = false; // used for toggle 

for(var i=0; i < container.length; i++){
container[i].onclick = function(){

  if(openMenu === false) {
    for(var j = 0;j<bar1.length;j++){
    bar1[j].classList.add("bar1_open");
    bar2[j].classList.add("bar2_open");
    bar3[j].classList.add("bar3_open");
    }
    box.classList.add("changeBackground");

    openMenu = true;

  } else {
  for(var j = 0;j<bar1.length;j++){
    bar1[j].classList.remove("bar1_open");
    bar2[j].classList.remove("bar2_open");
    bar3[j].classList.remove("bar3_open");
  }
    box.classList.remove("changeBackground");

    openMenu = false;
  }

}
};

Upvotes: 1

colby brooks
colby brooks

Reputation: 37

If you are ok with using JQuery this works perfect:

HTML(link to jquery):

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Javascript:

var container = document.getElementsByClassName('container')[0];

console.log(container);
var bar1 = document.getElementsByClassName('bar1')[0],
    bar2 = document.getElementsByClassName('bar2')[0],
    bar3 = document.getElementsByClassName('bar3')[0],
    box = document.getElementsByClassName('box')[0],
    openMenu = false; // used for toggle 

    $(".container").click(function(){

     if(openMenu === false) {

     $(".bar1").addClass("bar1_open");
     $(".bar2").addClass("bar2_open");
     $(".bar3").addClass("bar3_open");

     box.classList.add("changeBackground");

     openMenu = true;

   } else {

     $(".bar1").removeClass("bar1_open");
     $(".bar2").removeClass("bar2_open");
     $(".bar3").removeClass("bar3_open");

     box.classList.remove("changeBackground");

     openMenu = false;
  }

});

Upvotes: 0

Related Questions