Three-way toggling of two states (Javascript or jQuery)

Question

I am working on a page that will show prices in a choice of currencies (euros, pounds or dollars). My aim is to display the price in euros first, keeping the pound and dollar prices hidden.

<button id="mybutton">Change Currency</button>
<p id="euro" class="shown">Euro</p>
<p id="pound" class="hidden">Pound</p>
<p id="dollar" class="hidden">Dollar</p>

When the button is clicked, I need the three ids to cycle through the three states shown/hidden/hidden, hidden/shown/hidden and hidden/hidden/shown. So far I have made it work with two ids (not difficult!).

$('#mybutton').click(function()
{
     $('#euro').toggleClass('hidden','shown'),
     $('#pound').toggleClass('hidden','shown');
});

I'm at a loss to see how to extend this to the third id. Any ideas gratefully received.

Answer 1

I just wanted to point out you may be confused on how toggleClass works. The second parameter is never a string like a class. Instead, it's a boolean. I've gotten rid of the "shown" class (things are shown by default) and used a boolean for the second argument:

i=0;

$('#mybutton').click(function(){
     i++;
     $('#euro').toggleClass('hidden', i%3!==0),
     $('#pound').toggleClass('hidden',i%3!==1);
     $('#dollar').toggleClass('hidden',i%3!==2);
});

All this does is remove the hidden class when the cycling matches (i%3===0) and add it (hide those elements) otherwise.

If you did want to toggle between multiple classes, I believe the first argument should be a space separated list of classes.

http://jsfiddle.net/NWj5w/

http://api.jquery.com/toggleClass/

Answer 2

Supposing you don't use those class elsewhere, you could do

var i = 0, divs = $('.hidden, .shown');
$('#mybutton').click(function() {
     $('.shown').removeClass('shown').addclass('hidden');
     i = (i+1) % divs.length;
     divs.eq(i).removeClass('hidden').addclass('shown');
});

Supposing you use those classes elsewhere, I'd recommend you to change your HTML to add a specific classs and to do

var i = 0, divs = $('.specificClass');
$('#mybutton').click(function() {
     $('.shown').removeClass('shown').addclass('hidden');
     i = (i+1) % divs.length;
     divs.eq(i).removeClass('hidden').addclass('shown');
});

Note that I find usually simpler to change only one class, that is to give all the elements the same "specific" class and to just add or remove the "hidden" class.

Answer 3

My final solution is based on Jere's answer above, but is a little more complicated. As well as showing a price in one currency and hiding the other's, I also need to indicate which currency is being displayed and which others are available. Therefore my html ends up like this:

<span class="euro_h activ">Euro</span> 
<span class="pound_h activ inactiv">Pound</span> 
<span class="dollar_h activ inactiv">Dollar</span> 
<span id="change" style="cursor:pointer">Change Currency</span>
<br>
<br>
<span class="euro shown">€ 100</span>
<span class="pound hidden">£ 80</span>
<span class="dollar hidden">$ 140</span>

The CSS is:

.activ {color:#ff0000}
.inactiv {color:#CCCCCC}
.shown {display:inline}
.hidden {display:none}

The javascript is:

i=0;
$('#change').click(function(){
     i++;
     $('.euro').toggleClass('hidden', i%3!==0);
     $('.pound').toggleClass('hidden',i%3!==1);
     $('.dollar').toggleClass('hidden',i%3!==2);
     $('.euro_h').toggleClass('inactiv', i%3!==0);
     $('.pound_h').toggleClass('inactiv',i%3!==1);
     $('.dollar_h').toggleClass('inactiv',i%3!==2);
});

Doubling up the lines seems a bit messy but it works and my efforts at something more streamlined didn't. So .....

Answer 4

HTML

<button id="mybutton">Change Currency</button>
<p id="euro" class="unit shown">Euro</p>
<p id="pound" class="unit hidden">Pound</p>
<p id="dollar" class="unit hidden">Dollar</p>

JavaScript

$("#mybutton").on("click", function() {
    var btns = $(".unit");
    var active = btns.filter(".shown").removeClass("shown").next();    
    active = (active.length) ? active : btns.eq(0)
    active.addClass("shown");
});

Fiddle

http://jsfiddle.net/g6EM5/

Answer 5

Another working example:

HTML:

<button id="mybutton">Change Currency</button>
<p class="currency euro">Euro</p>
<p class="currency pound">Pound</p>
<p class="currency dollar">Dollar</p>

JS:

$('#mybutton').click(function() {
    for (var i = 0; i < currencies.length; i++) {
        i == shown ? currencies[i].show() : currencies[i].hide();
    }
    shown = (shown+1)%3;
});

Fiddle