Hi everyone,
I tried different things from the web but its still not wat i was searching for, maybe someone here can help me out...
I have 2 buttons on a page, each button can be pressed and they change their state just by switching a sprite image. I use a jscript for a pressed state so that they stay pressed when clicked.
Now what i want is that when i just click one of the buttons the otherone automatically switches to his normal unpressed state.
This is de code i use for pressing and changing the class to .active. My idea was to use an nonactive class to switch button2 to its normal state.
$(document).ready(function(){
$('.button1').click(function() {
$(this).toggleClass('button1').toggleClass('active');
$(this).toggleClass('button2').toggleClass('nonactive'); (this line i tried but it wont work)
});
});
$(document).ready(function(){
$('.button2').click(function() {
$(this).toggleClass('button2').toggleClass('active');
});
});
-----------------------------------
HTML
<li class="button1"><a class="button1" href="javascript:showonlyone('newboxes1');" title="informatie"><span class="displace">Info</span></a></li>
<li class="button2"><a class="button2" href="javascript:showonlyone('newboxes2');" title="informatie"><span class="displace">Info</span></a></li>
CSS
Button1
ul.cssmenu li.button1 a {
background-position: 0px 0px;
}
ul.cssmenu li.button1 a:active, a.active {
background-position: 0px -74px;
}
ul.cssmenu li.button1 a:hover {
background-position: 0px -37px;
}
ul.cssmenu li.button2 a {
background-position: 0px 0px;
}
Button 2
ul.cssmenu li.button2 a:active, a.active {
background-position: 0px -74px;
}
ul.cssmenu li.button2 a:hover {
background-position: 0px -37px;
}
ul.cssmenu li.button2 a.nonactive {
background-position: 0px 100px;
All help is welcome...