Three way class toggle

css, html, javascript, jquery

Solution

One further approach:

$('input:radio[name="toggle"]').change(
    function(){
        $('span')
            .eq($(this).index())
            .removeClass('displayNone')
            .siblings('span')
            .addClass('displayNone');
    });​

JS Fiddle demo.

Edited to add, for the more up-to-date browsers, a pure CSS means of accomplishing the same:

input[type=radio]:nth-child(1):checked ~ span:nth-of-type(1),
input[type=radio]:nth-child(2):checked ~ span:nth-of-type(2),
input[type=radio]:nth-child(3):checked ~ span:nth-of-type(3){
    height: 1em;
    width: 100%;
    background-color: #f90;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}

span {
    display: block;
    overflow: hidden;
    height: 0;
    width: 0;
    background-color: #fff;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}​

JS Fiddle demo.

jQuery References:

- `addClass()`.

- `change()`.

- `eq()`.

- `index()`.

- `:radio` selector.

- `removeClass()`.

- `siblings()`.

CSS References:

- CSS transitions.

- `E ~ F` general-sibling combinator.

- `:nth-child()` pseudo-class.

- `:nth-child()` W3.org wiki entry.

- `:nth-of-type()` pseudo-class.

- `:nth-of-type()` W3.org wiki entry.

Problem

I have two radio buttons to toggle two alternative texts and it works: ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <style type="text/css"> .displayNone { display: none; } </style> </head> <body> <input type="radio" name="toggle" />A <input type="radio" name="toggle" />B <span class="A">A</span> <span class="B displayNone">B</span> <script type="text/javascript"> $('input[name=toggle]').change(function() { $('.A, .B').toggleClass('displayNone'); }) </script> </body> </html> ``` Now I want to make it three radio buttons to toggle between three texts: ``` <input type="radio" name="toggle" />A <input type="radio" name="toggle" />B <input type="radio" name="toggle" />C <span class="A">A</span> <span class="B displayNone">B</span> <span class="C displayNone">C</span> ``` The solution I'm thinking about looks too verbose. What would be the clean one?

Original source