• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 245
  • Last Modified:

how do you toggle on off buttons

Hi,

I have a table that has some images and text in it. I want to be able to have an "on" off" state for the images so the user knows what was clicked on.

It starts with one of the table cells having the on state and the rest having the off state.

I don't know how to make the toggle function so the other images "knows" which one is on and the rest are off

Here is my table:

<table cellspacing="7" cellpadding="0" border="0">
	<tr>
	    <td width="60" align="left">View:</td>
	    <td width="100"align="left"><a><img src="images/white_on.png" />All Types</a></td>
	    <td width="113" align="left"><a><img src="images/orange_off.png" />On Demand</a></td>
		<td width="101" align="left"><a><img src="images/green_off.png" />Webinars</a></td>
		<td width="141" align="left"><a><img src="blue_off.png" />Seminars</a></td>
        </tr>
        </table>

Open in new window


Thanks!
0
smfmetro10
Asked:
smfmetro10
  • 2
  • 2
1 Solution
 
GaryCommented:
Using jquery, I just added a background color to the image to show the state
http://jsfiddle.net/GaryC123/vTf2L/2/
<table cellspacing="7" cellpadding="0" border="0">
	<tr>
	    <td width="60" align="left">View:</td>
        <td width="100"align="left"><a><span class="off"></span>All Types</a></td>
	    <td width="113" align="left"><a><span class="off"></span>On Demand</a></td>
		<td width="101" align="left"><a><span class="off"></span>Webinars</a></td>
		<td width="141" align="left"><a><span class="off"></span>Seminars</a></td>
        </tr>
        </table> 
 

Open in new window

table a span {
    display:inline-block;
    height:20px;
    width:20px;
    border:1px solid blue
}
table a span.off {
    background:url("images/orange_off.png") red
}
table a span.on {
    background:url("images/orange_on.png") green
}

Open in new window

$(function() {
$("table a span").click(function(){
  $(this).toggleClass("on")
})
$("table a span:eq(0)").toggleClass("on")})

Open in new window

0
 
smfmetro10Author Commented:
Thanks for the reply!
The thing is that when you click on one of them, the other images have to go back to their off state.
0
 
GaryCommented:
http://jsfiddle.net/GaryC123/vTf2L/3/

$("table a span").click(function(){
    $("table a span").removeClass("on")
  $(this).toggleClass("on")
})
$("table a span:eq(0)").toggleClass("on")

Open in new window

0
 
smfmetro10Author Commented:
Outstanding! Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now