Setting conditions for classList.toggle

Question

I have a function that's triggered by onClick . Here's the example . I want to only be able to trigger the function 'slide1' when 'slide2' is not triggered. I tried setting up a conditional statement like this:

function slide1() {
    btn1.classList.toggle('slide', btn2.className != 'slide');
}

I also tried an if statement like this:

function slide1() {
    if(btn2.className != 'slide') {
    btn1.classList.toggle('slide');
    }
}

That didn't work either.

I just need a simple way to toggle classes if certain conditions are met; without jQuery or a library. Thanks.

 var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); function slide1() { btn1.classList.toggle('slide'); } function slide2() { btn2.classList.toggle('slide'); } 

 * { margin: 0; transition: 1s ease; -webkit-transition: 1s ease; } div { width: 50%; height: 100vh; display: block; position: absolute; text-align: center; cursor: pointer; } #btn1 { background: blue; } #btn2 { background: red; left: 50%; } #btn1.slide { width: 80%; z-index: 999; } #btn2.slide { width: 80%; z-index: 999; left: 20%; } 

 <div id="btn1" onClick="slide1();"> left </div> <div id="btn2" onClick="slide2();"> right </div> 

UPDATE: Here is an expanded example of the problem I'm dealing with. There are several elements with classes that need to be toggled only under certain circumstances. If 'panel1' is triggered when 'panel2' has already been triggered, then 'panel1' will cover 'panel2'. and the same with 'panel3'.

Answer 1

To answer your question, the proper way to check if an element has a class in JavaScript is element.classList.contains .

So, in your example, you should replace the condition with

if(btn2.className.contains('slide')) {
  ...
}

---

As a sidenote, having different functions doing the exact same thing on different elements should be avoided, where possible. Instead of having two functions, you should have only one and use the click event's target:

 let halves = document.querySelectorAll("div"); function slide(event) { // remove `slide` class from both divs: [].map.call(halves, function(half){ half.classList.remove('slide'); }); // add `slide` class to currently clicked div: event.target.classList.add('slide') } 

 * { margin: 0; transition: 1s ease; -webkit-transition: 1s ease; } div { width: 50%; height: 100vh; display: block; position: absolute; text-align: center; cursor: pointer; } #btn1 { background: blue; } #btn2 { background: red; left: 50%; } #btn1.slide { width: 80%; z-index: 999; } #btn2.slide { width: 80%; z-index: 999; left: 20%; } 

 <div id="btn1" onClick="slide(event);"> left </div> <div id="btn2" onClick="slide(event);"> right </div> 

On a different note, I assume you're aware the selectors used in both your question and my answer are outrageously generic and should never be used in production ready code.

---

And as a last note, your CSS is quite faulty but I'm not considering fixing it here, as it wouldn't help anyone except yourself, which goes against the first principle of SO: one answer should help multiple users having the same problem. Here's how I'd have coded your example:

 let br = document.querySelector('#blueRed'); br.addEventListener('click', function(event) { event.target.classList.toggle('slide'); [].map.call(br.querySelectorAll('div'), function(div) { if (div !== event.target) { div.classList.remove('slide'); } }); }) 

 body { margin: 0; } #blueRed { height: 100vh; display: flex; } #blueRed div { text-align: center; display: flex; align-items: center; justify-content: center; transition: flex-grow 1s cubic-bezier(0.4, 0, 0.2, 1); flex-grow: 1; background-color: blue; color: white; cursor: pointer; } #blueRed div:last-child { background-color: red; } #blueRed div.slide { flex-grow: 3; } 

 <div id="blueRed"> <div>left</div> <div>right</div> </div> 

Fiddle here . Should be prefixed .

Answer 2

I think I understand your objective...

I condensed the functions into one and start off one button with the className = 'slide' . If one button is clicked then the class slide always alternates between the two buttons.

Demo

 var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); function slide() { btn1.classList.toggle('slide'); btn2.classList.toggle('slide'); } 

 * { margin: 0; transition: 1s ease; -webkit-transition: 1s ease; } div { width: 50%; height: 100vh; display: block; position: absolute; text-align: center; cursor: pointer; } #btn1 { background: blue; } #btn2 { background: red; left: 50%; } #btn1.slide { width: 80%; z-index: 999; } #btn2.slide { width: 80%; z-index: 999; left: 20%; } 

 <div id="btn1" onClick="slide();" class='slide'> left </div> <div id="btn2" onClick="slide();"> right </div>