CODEWITHSUNDEEP
javascriptjqueryhtmlcsstoggle
Jeremy
Jeremy

Reputation: 312

Toggle element's class by ID

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>

Upvotes: 3

Views: 13523

Answers (5)

Krisi Suci
Krisi Suci

Reputation: 139

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');

            });
        });

Upvotes: 0

Andr&#233; Pedroso
Andr&#233; Pedroso

Reputation: 1664

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

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

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');
        }
    });
});​

Upvotes: 0

pdeschen
pdeschen

Reputation: 1379

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!

Upvotes: 0

Danil Speransky
Danil Speransky

Reputation: 30453

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

Upvotes: 4

Related Questions