After experimenting with some code for toggling buttons that I found (thanks to @JohnieHjelm!), I managed to simplify it and incorporate it into my webpage successfully. However, the issue arises when dealing with more than one button. Initially, everything seems fine, but then it all falls apart as demonstrated in this link: http://jsfiddle.net/KwKjd/3/
<div id='settings'>
<p>
Links:
<span class='onoff on'>ON</span>
<span class='onoff'>OFF</span>
</p><br />
<p>
Chapters:
<span class='onoff on'>ON</span>
<span class='onoff'>OFF</span>
</p>
</div>
$(function(){
$('#settings .onoff').click(function(){
$('#settings .onoff').removeClass("on");
$(this).addClass("on");
});
});
The toggle buttons display correctly initially:
However, upon clicking, chaos ensues:
I have considered renaming the second button to 'onoffb' and duplicating the entire $(function()) block for the new class (or id). This may work for a couple of buttons but becomes cumbersome for numerous buttons.
As someone still learning javascript, I am stumped on how to resolve this issue. Any guidance on where to focus my efforts would be greatly appreciated. My current idea involves assigning an id to each button and somehow using jquery to isolate and modify only that specific button, but I haven't been successful in implementing it yet.