Question

update at the bottom

There are 4 divs that are set to look like toggle buttons. When a button is toggled on:

-it is animated as a pressed button,

-it retrieves some content and it places that content into a box, and then

-it returns a value of 1 to an array.

(no problem.)

Problem:
When there is already one button button pressed, I don’t understand how to toggle the first button off without also turning the other one off or affecting the other buttons. How can I pass the output of one button to the others so they know who they have to turn off when they turn on?

My solution thus far has been to create 2 arrays:

var arrayValues [ a, b, c, d]; //the values of each button state: [0,0,0,0] <-all off | all on-> [1,1,1,1]
var addedValues = [a + b + c + d]; //the values of each array item added together: [0+0+0+0]= 0 <-all off | all on-> [1,1,1,1]=4

and then

if (addedValues = 0) {
console.log("cool, nothing is pressed yet. I am going to return true, but where does that return value go? How can I access it?");
return true;

} else if (addedValues > 1) {
console.log("ok I now know that at least one button has already been pressed, but how can I tell the other buttons which one was already pressed?");
}

For example if the first button is toggled on
arrayValues = [1,0,0,0]

and now the second button has been toggled on so it says
arrayValues = [1,1,0,0]

but how can I pass that information into all of the buttons? This next part is obviously flawed but it’s the only thing I could think of doing:

} else if(addedValues >= 2) {

        arrayValues[0] = arrayValues[0] - 1;
        arrayValues[1] = arrayValues[1] - 1;
        arrayValues[2] = arrayValues[2] - 1;
        arrayValues[3] = arrayValues[3] - 1;

}

so now, the only values that are not negative are the two buttons in active states… but that does nothing for because we already knew that. How can I tell the buttons which button to subtract 1 from without affecting any of the other buttons?

Update: To see the madness in context http://jsfiddle.net/Luhring/EjW7A/23/

*update: *
Just to clarify: the buttons aren’t only just toggling their appearances, they’re changing other content displayed on the page:
When you click each button the content changes. each button has 1 original group of original content that is toggled on/off with the button. like changing the channel on a tv screen with a remote control.

so if button 1 is pressed, when button 2 is pressed button 1 must turn off (removing its’ content and animating back up to its’ original position) in order to allow button 2’s stuff to display.

shout out to @nbrooks for writing 4 lines of code that more or less did as much as I did in +100. Still not solved but his is WAY more efficient than mine (you can see his version here: http://jsfiddle.net/EjW7A/20/ ) )

Answer 1

Updated Demo, according to new reqs: http://jsfiddle.net/EjW7A/24/

$(function() {
    $('.plain').click(function() {
        var newClassName = $(this).is('.selected') ? '' : this.id;
        if ($(this).is('#content')) return;
        $(this).toggleClass('selected', 1000);
        $('#content').attr('class', 'plain '+newClassName);
        $('.selected').not(this).removeClass('selected');       
    });
});​

---

Update to your fiddle demo

The best way to do this is just give the elements a common class, to which you can bind a click handler and a css rule. This will accomplish your function of only having one button being pressed at a time, plus the ability to turn it on/off without affecting the others.

Javascript (jQuery):

$(function() {
    $('.plain').click(function() {
        $(this).toggleClass('selected');
         $('.selected').not(this).removeClass('selected');       
    });
});​

HTML

<div id="a" class="plain">
    <p>A</p>
</div>

CSS

.plain {
    width: 200px; height: 200px; margin: 20px; text-align:center; float: left;
    font-size: 100px; color:#fff; background-color:red;
}
p { margin-top: 25%; margin-bottom:25%; }
.selected { background-color: blue; }