Search jQuery

jQuery Forum

Toggle Button Question

in Using jQuery • 12 years ago

I'm brand new to jquery... please help:

Basically, I have some buttons that toggle background color but I would also like a button to toggle all, to clear all, and to color all. My code only has 3 buttons set up but I just need help with the toggle all, clear all, and color all buttons. I'm not sure how to have it check if the cells are colored already and to then make them white or vice versa.

Thank you in advance.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<style type="text/css">
.plsc {
background: blue;
color: white; }
.tspoc {
background: green;
color: white; }
#div1 {
height:10px;
width:10px;
background-color:red;
position:absolute;}
#button, #button2 {
cursor: pointer; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#button").toggle(function() {
$(".plsc").stop().animate({ backgroundColor: "white", color: "black" }, 1000);
},function() {
$(".plsc").stop().animate({ backgroundColor: "blue", color: "white" }, 1000);
});
$("#button2").toggle(function() {
$(".tspoc").stop().animate({ backgroundColor: "white", color: "black" }, 1000);
},function() {
$(".tspoc").stop().animate({ backgroundColor: "green", color: "white" }, 1000);
});
$("#button3").toggle(function() {
????????
});
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="500" style="table-layout:fixed;">
<tr height="44px" align="center">
<td class="plsc">10</td>
<td class="tspoc">12</td>
</tr>
<tr height="44px" align="center">
<td id="button"></td>
<td>PLSC</td>
</tr>
<tr height="44px" align="center">
<td id="button2"></td>
<td>TSPOC</td>
</tr>
<tr height="44px" align="center">
<td id="button3"></td>
<td>All</td>
</tr>
</table>
</body>
</html>

Replies(1)

jay.blanc..

Re: Toggle Button Question

12 years ago

It depends on the effect you're after, for instance check this; http://jsfiddle.net/ueRHR/. If you have already toggled one of the conditions the first click of button 3 will not matter to that cell but it will "catch up" if you click 3 again. If this is not what you want to happen you will actually have to test for color first.

Top Reply

Response title

Attachments

jQuery Forum

Toggle Button Question

Replies(1)

Re: Toggle Button Question

Statistics

Tags

Actions