Toggle element's class by ID

Question

I’m trying to change the class of an element when it is clicked on from one value A to value B and then from value B back to value A when it is clicked a second time. I found some code on here that allowed me to change it once, but not a second time. (See original here).

Here is the original code:

<script type="text/javascript">
  function changeClass() {
    document.getElementById("MyElement").className += " MyClass";
    document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g, '')
  }
</script>

And here is my code:

<script type="text/javascript">
  function changeClass() {
    if (document.getElementByID("arrow").className == "arrowdown") {
      document.getElementById("arrow").className.replace(/(?:^|\s)arrowdown(?!\S)/g, 'arrowup')
    }
    elseif(document.getElementByID("arrow").className == "arrowup") {
      document.getElementById("arrow").className.replace(/(?:^|\s)arrowup(?!\S)/g, 'arrowdown')
    }
  }
</script>

You tagged this question with jQuery? Why are you not using it? — Whymarrh, Sep 21 '12 at 00:20

score 4 · Accepted Answer · answered Sep 21 '12 at 00:21

4

$('#arrow').toggleClass('arrowup arrowdown');

answered Sep 21 '12 at 00:21

Danil Speransky

29,891
5
68
79

1

`$('#arrow').toggleClass('arrowdown').toggleClass('arrowup');` ah it works! and its jquery... thank you. – Jeremy Sep 21 '12 at 00:24
1

`$('#arrow').toogleClass('arrowdown arrowup')` – elclanrs Sep 21 '12 at 00:24
@elclanrs that will not work when repeatedly toggled. it seems to keep the class as 'arrowdown arrowup' – Jeremy Sep 21 '12 at 00:27
@SperanskyDanil looks like it works on there, but I can't seem to get it to work in that format on my page. – Jeremy Sep 21 '12 at 00:38

score 0 · Answer 2 · answered Sep 21 '12 at 00:24

0

Why not simply use jQuery toggleClass instead along with a id selector?

   $('#arrow').toggleClass('arrowup');
   $('#arrow').toggleClass('arrowdown');

And save yourself debugging and a few lines of code!

answered Sep 21 '12 at 00:24

pdeschen

1,369
15
17

score 0 · Answer 3 · answered Sep 21 '12 at 00:25

Check this FIDDLE

Its far easier with JQuery..

$(function() {
    var i = 0;
    $('div').on('click', function() {
       i++;
        if( i % 2 == 0){
            $(this).addClass('arrowup').removeClass('arrowdown');
        }
        else{
            $(this).addClass('arrowdown').removeClass('arrowup');
        }
    });
});

score 0 · Answer 4 · answered Sep 21 '12 at 00:31

just use jquery addClass() and removeClass() or even better the toggleClass inside your click event

<div id="elemID" class="class1">
</div>


function changeClass()
{
    $("#elemID").toggleClass("class1");
    $("#elemID").toggleClass("class2");  
}

REF's

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

http://api.jquery.com/toggleClass/

Cheers

score 0 · Answer 5 · edited Dec 12 '18 at 16:44

I faced something similar to this today. In my code for each feature the user would express his opinion by pressing thumbs up or thumbs down. The selected thumb icon would have a brighter color, so when the user would click the thumbs up icon, the thumbs up icon would turn green and the thumbs down icon (if it were green) would turn black.

I solved it using jQuery:

$(document).ready(function () {
            $('#vote-yes-@(Model.ProductReviewId)').click(function () {
                setProductReviewHelpfulness@(Model.ProductReviewId)('true');

                $('#1vote-yes-@(Model.ProductReviewId)').toggleClass('green');
                $('#1vote-no-@(Model.ProductReviewId)').removeClass('green').addClass('black');

            });
            $('#vote-no-@(Model.ProductReviewId)').click(function () {
                setProductReviewHelpfulness@(Model.ProductReviewId)('false');

                $('#1vote-no-@(Model.ProductReviewId)').toggleClass('green');
                $('#1vote-yes-@(Model.ProductReviewId)').removeClass('green').addClass('black');

            });
        });

Toggle element's class by ID

5 Answers5