Two events, one click, no jquery

Question

I've been learning about events and event bubbling recently and I was trying to test myself with a little code and I've stepped a little father than I can handle.

What I'm trying to do is when one <div> is clicked, it toggles down to reveal an extended section. When you click on this <div> I want an animated icon to activate. I've got it so each events happens separately but I'm still pretty new to JS and am not quite sure how to, essentially, check if <this> happens or this=true, make sure that happens too.

Here is the code on JS Fiddle.

If anyone has any pointers, or can direct me to a further tutorial that would be fantastic.

Raw Code:

HTML

<div id="slideSection1">
<div class="nav-icon">
   <div class="line"></div>
</div>
</div>

CSS:

 .nav-icon {
 height: 77px;
 width: 77px;
 position: relative;
 top:-10px;}

.line {
height: 6px;
width: 55px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: black;
transition: .8s;}

.line::before {
height: 55px;
width: 6px;
background: black;
position: absolute;
top: 0;
left: 0;
content: "";
transition: .3s;}

.nav-icon.active .line {
transform: rotate(360deg);}

.nav-icon.active .line::before {
transform: rotate(90deg);}

.nav-icon {
height: 77px;
width: 77px;
position: relative;}

.line {
height: 6px;
width: 55px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: black;
transition: .8s;}

.line::before {
height: 55px;
width: 6px;
background: black;
position: absolute;
top: -24px;
left: 25px;
content: "";
transition: .3s;}

.nav-icon.active .line {
transform: rotate(360deg);}

.nav-icon.active .line::before {
transform: rotate(90deg);}

 #slideSection1 {
 height: 60px;
 width: auto;
 border: 1px solid black;
 margin-top: 10px;
 margin-left: 0;
 overflow: hidden;
 border-radius: 2px;
 transition: height 500ms ease;
 -moz-transition: height 500ms ease;
 -ms-transition: height 500ms ease;
 -o-transition: height 500ms ease;
 -webkit-transition: height 500ms ease;}

JavaScript:

//animated icon

 function toggleactive(toggle) {
 toggle.addEventListener("click", function() {

     if (this.classList.contains("active") === true) {
       this.classList.remove("active");
     } else {
       this.classList.add("active");
     }
   });
 }
 //--------------------------------------------------------------------//

 var slideSection1 = document.getElementById("slideSection1");
 var obj = document.querySelectorAll('.nav-icon');

 for (var i = obj.length - 1; i >= 0; i--)
 {
   var toggle = obj[i];
    toggleactive(toggle);
 };


 slideSection1.onclick = function() {
   this.style.height == "60px" ? this.style.height = "150px" :   
 this.style.height = "60px";

 };

Other than having the order a little messed up, it seems to work fine -> **https://jsfiddle.net/jo9han2c/13/** — adeneo, Mar 09 '16 at 13:45
They work fine independently of one another. If you click on the animated plus sign, they both work, but not if you click only on the slide div. What I am trying to do is get it to work both ways but I can't seem to do it. — Theodore Steiner, Mar 09 '16 at 13:54
Okay, so you're trying to do this then -> **https://jsfiddle.net/jo9han2c/15/** — adeneo, Mar 09 '16 at 14:03
As it's just a few lines of code, you can look up the methods on [**MDN**](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) and learn what they do there — adeneo, Mar 09 '16 at 17:03

Two events, one click, no jquery

0 Answers0