CODEWITHSUNDEEP
jquerytoggleclass
Sam Opoku
Sam Opoku

Reputation: 69

Trouble Understanding toggleClass

Hi there so i went on the Jquery api documentation website for this function and still don't understand how it works. Did some extended research and still don't understand it.

So im gonna give an example and just would like somebody to walk through what I'm doing wrong and what is the right thing to do.

For Example Lets say i would like to animate a pink square

<body>

<div id=square>

</div>

</body>
<style>
#square {
width: 100px;
height: 100px;
background: pink;
border: 1px solid aqua;
}

.square {
width: 100px;
height: 100px;
background: pink;
border: 1px solid aqua;
}


</style>


<script>
$("#square").click(function(){
$(this).animate({width: "500px",
height: "500px"
});

/* which makes this pink square animate to  500px X 500px
and then once its rechecked i put the toggle class to have it toggle        class back to .square which is the original position, But it seems not to    be working.*/

 $("#square").click(function(){
$("#square").toggleClass(".square");
});
});


</script>

Upvotes: 0

Views: 27

Answers (1)

jhawes
jhawes

Reputation: 2364

I'm not sure what your html is, but assuming that the #square and .square are both the same element your css will favor your id styles over the class styles, so even if the class is toggling you won't see any change if the id also has styles for it.

Also, for the .toggleClass() call you don't need to place the period before the class. Same for addClass(), removeClass, etc.

Here I gave the element your background color and then gave the class the new color (classes will override elements in css just like IDs will override classes).

html

<div id="square" class="square"></div>

CSS

div {
    background: pink;
}
#square {
    width: 100px;
    height: 100px;
    border: 1px solid aqua;
}

.square {
    width: 100px;
    height: 100px;
    background: blue;
    border: 1px solid aqua;
}

jQuery

$("#square").click(function(){
    $("#square").toggleClass("square");
});

Also, in case it helps, here is a jsFiddle.

Upvotes: 1

Related Questions