How to toggle/switch class of a div onclick using only javascript

Question

I want a div to switch its class (toggle) onclick and then revert back to original class onclick again

My code is:

  function myfunc() { //the code over here }

 .normal { width:25%; height:25%; background: #f00; } .active { width:100%; height:100%; background: #f00; } #div{}

 <body> <div id="div" onclick="myfunc()">click here</div> </body>

Answer 1

using pure js:

<div id="div" class="normal" onclick="myfunc(this)">click here</div>

js

function myfunc(div) {
  var className = div.getAttribute("class");
  if(className=="normal") {
    div.className = "active";
  }
  else{
    div.className = "normal";
  }
}

Answer 2

Use:

 // hasClass function hasClass(elem, className) { return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' '); } // toggleClass function toggleClass(elem, className) { var newClass = ' ' + elem.className.replace( /[\\t\\r\\n]/g, " " ) + ' '; if (hasClass(elem, className)) { while (newClass.indexOf(" " + className + " ") >= 0 ) { newClass = newClass.replace( " " + className + " " , " " ); } elem.className = newClass.replace(/^\\s+|\\s+$/g, ''); } else { elem.className += ' ' + className; } } document.getElementById('div').onclick = function() { toggleClass(this, 'active'); }

 div { margin:20px; padding:10px 15px; background:#FFD202; border-radius:5px; color:#222; display:inline-block; text-decoration:none; } .active { background:#000; color:#FFD202; }

 <div id="div" href="#">Click a few times, toggle me!</div>

Answer 3

function myFunc(e) {
    if(e.className == 'active') {
        e.className = 'normal';
    } else {
        e.className = 'active';
    }
}

then have:

<div id="div" onclick="myFunc(this)">blah</div>

pretty sure that is answered in a number of other questions round here too.

Answer 4

I've been looking for a solution myself where I want to toggle between two images with pure JavaScript. I think this is quite an effective method of using JavaScript. (I had to switch between a plus and a minus image sign on user click.)

HTML

<a href="#" class="plus" onclick="toggleClass(this,'minus')">Text here</a>

CSS

.plus {
  background-image: url(../img/plus-circle-grey.svg);
}

.minus {
  background-image: url(../img/minus-circle-grey.svg);
}

JavaScript

function toggleClass(e,c) {
    (e).classList.toggle(c);
}

Works like a charm.

Answer 5

Move away from obtrusive JavaScript, bind the event-handlers in the JavaScript of the page, not in the HTML (this makes for easier future maintenance):

function classToggle() {
    this.classList.toggle('class1');
    this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);

JS Fiddle demo .

Answer 6

do:

function myfunc(){
  var divEle = document.getElementById("div"),
      current_class = divEle.className;
  divEle.className = (current_class == "active") ? "normal" : "active";
}

Answer 7

A good way to approach your dilemma is using the classList API. I switch classes using nested for loops (for repeating instances of a class) and query the document like so:

var desiredElement = document.querySelectorAll('.light');

function switchTheme() {
    for (var i = 0; i < desiredElement.length; i++) {
        if (desiredElement[i].classList.contains('light')) {
            desiredElement[i].classList.remove('light');
            desiredElement[i].classList.add('dark');
        } else if (desiredElement[i].classList.contains('dark')) {
            desiredElement[i].classList.remove('dark');
            desiredElement[i].classList.add('light');
        }
    }
}

By adding a button or hyperlink to either perform this function onclick or as href, I can toggle any element in the HTML document containing the light or dark class and effectively make a toggle switch to switch the sub design classes.

I used this to create a dark theme for a website that can toggle to a lighter theme by the user if desired.

 var desiredElement = document.querySelectorAll('.light'); function switchTheme() { for (var i = 0; i < desiredElement.length; i++) { if (desiredElement[i].classList.contains('light')) { desiredElement[i].classList.remove('light'); desiredElement[i].classList.add('dark'); } else if (desiredElement[i].classList.contains('dark')) { desiredElement[i].classList.remove('dark'); desiredElement[i].classList.add('light'); } } }

 .light { background-color: #ddd; } .dark { background-color: #333; }

 <DOCTYPE HTML> <html> <body class="light"> <button onclick="switchTheme()">Toggle</button> </body> </html>

Answer 8

已经有不少答案，但我认为这是最简单/最简洁的方法：

<div onclick="$(this).toggleClass("active")">click here</div>

Answer 9

If you want to switch/swap class-A and class-B , toggle both classes:

function myFunc(element) {
    element.classList.toggle("class-A");
    element.classList.toggle("class-B");
}

And

<div onclick="myFunc(this)" />

Answer 10

Try it with jquery may this help

html-

<div id="div1" class="normal">click here</div>
<div id="div2" class="normal">click here</div>

css-

.normal{ width:25%;height:25%;background: #f00;}
.active{ width:100%;height:100%;background: #f00;}

jquery-

$(document).ready(function(){
                $(".normal").click(function(){
                    var thisobj =  $(this);
                    if(thisobj.hasClass("active"))
                    {
                        $(this).removeClass("active");
                    }else
                    {
                        $(this).addClass("active");
                    }
                });
            });

jsfiddle

How to toggle/switch class of a div onclick using only javascript

Question

10 answers

solution1
8 2013-09-29 07:28:54

solution2
3 2015-06-21 10:15:38

solution3
2 2013-09-29 06:29:29

solution4
2 2016-04-21 13:58:38

HTML

CSS

JavaScript

solution5
1 2013-09-29 08:31:27

solution6
0 2013-09-29 06:32:19

solution7
0 2017-07-28 14:20:26

solution8
0 2017-08-01 04:28:11

solution9
0 2018-02-08 03:22:19

solution10
-1 2013-09-29 07:23:04

How to toggle/switch class of a div onclick using only javascript

Question

10 answers

solution1 8 2013-09-29 07:28:54

solution2 3 2015-06-21 10:15:38

solution3 2 2013-09-29 06:29:29

solution4 2 2016-04-21 13:58:38

HTML

CSS

JavaScript

solution5 1 2013-09-29 08:31:27

solution6 0 2013-09-29 06:32:19

solution7 0 2017-07-28 14:20:26

solution8 0 2017-08-01 04:28:11

solution9 0 2018-02-08 03:22:19

solution10 -1 2013-09-29 07:23:04

solution1
8 2013-09-29 07:28:54

solution2
3 2015-06-21 10:15:38

solution3
2 2013-09-29 06:29:29

solution4
2 2016-04-21 13:58:38

solution5
1 2013-09-29 08:31:27

solution6
0 2013-09-29 06:32:19

solution7
0 2017-07-28 14:20:26

solution8
0 2017-08-01 04:28:11

solution9
0 2018-02-08 03:22:19

solution10
-1 2013-09-29 07:23:04