Add & Remove Class On Click with Javascript

Question

I actually don't often use Javascript and don't know much about coding with it, so I want to excuse this question, if it is a simple one!

I have this html elements:

<button class="btn"></button>

<div class="section1 active" style="z-index:1;"></div>

<div class="section2" style="z-index:2;"></div>

Now I would like to add the class "active" to div .section2 and at the same time to remove this class "active" from div .section1 by clicking on the button .btn .

Additionally, on click on button .btn I would like to change the style attribute "z-index:1" from .section1 to "z-index:2" and at the same time to change "z-index:2" from .section2 into "z-index:1"

Could someone please give me a full javascript code that would change the classes and style attributes when I click the button?

Thank you :)

You need Javascript, not Java. As for the difference between the two, see this: https://stackoverflow.com/a/245068/2391790 — unlimitednzt, Oct 21 '17 at 18:07
Thank you, I didn't know the difference. I have changed it into javascript :) — Eric Dietrich, Oct 21 '17 at 18:12
*"give me a full javascript code"*....No.. Stackoverflow is not a free code writing service. The expectation here is that you research how to do such things yourself. Then when you have acual code that isn't working as expected you post that code and people help you with it — charlietfl, Oct 21 '17 at 18:13

score 0 · Answer 1 · answered Oct 21 '17 at 18:24

$('.section1').click(function(){
   $('.section1').removeClass('active').html('CLICK FOR ACTIVE').css('z-index', 1);
   $(this).addClass('active').html('ACTIVE').css('z-index', 2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="section1 active" style="z-index:1;">CLICK FOR ACTIVE</div>

<div class="section1" style="z-index:2;">ACTIVE</div>

Add & Remove Class On Click with Javascript

1 Answers1