OK, lets say you have two classes defined in a stylesheet like so:
Code:
.stlye1 {
color:red;
}
.style2 {
color:blue;
}
and you want to toggle them based upon which is active upon click for a given element:
HTML Code:
<span id="tog" class="style1" onclick="toggle();">Hi there! Click me!</span>
Then you could have this function in a script block in the head:
Code:
function toggle(){
var el=document.getElementById('tog');
if (el.className=='style1')
el.className='style2';
else
el.className='style1';
}
If you wanted to include another element:
Code:
function toggle(){
var el=document.getElementById('tog');
var el2=document.getElementById('tog2');
if (el.className=='style1')
el.className=el2.className='style2';
else
el.className=el2.className='style1';
}
There are many ways to work this out and the best/most appropriate method would depend upon your markup and exactly what you want to have happen but, that's the basic idea.
Bookmarks