Trouble toggling the visibility of multiple divs, since toggle() tracks each element separately.

Question

I have a series of input buttons. Let's say two for simplicity. Each button has its own associated content in a separate div. All the content is in invisible divs ( display: none ) to begin.

If you click a button, its associated content is displayed. If you click it again, the content disappears. This is done with toggle(). The problem is that if you click one button and then click the other button, both divs are now visible.

So my main question is the best way to solve this problem. The solution I tried doesn't work, so if you have an entirely new approach, please let me know, or if you can refine my approach to make it work, that'd be great too. Okay, on to how I tried to solve this.

To solve this, I used siblings() to make sure all content divs are invisible before a new content divs appears.

So now, if I click 1 it appears. If I click 2, 1 disappears and 2 appears..... but now, if I click 1 again nothing happens (because it's my second click on number 1, and toggle() keeps track of each button separately)

How can I implement this type of content toggling without running into these issues?

(On the real page there are an unknown number of button / div combos and the user can click on them in any order)

Here's an example of the problem code (click 1, 2, then 1)

Thanks!

---

Looks like the answer may be something using .trigger('click') and :visible... just having trouble making it work.....

Answer 1

Hi Peter,

try this: http://jsfiddle.net/TennG/

Answer 2

To achieve your desired results, keep the state separate for each div (by using classes to represent hidden and visible, and don't use the toggle function.

$("input").click(
    function(event) {
        var theDiv = $("#d" + $(event.target).attr('id'));
        var wasHidden = theDiv.hasClass("hiddenDiv");
        $(".visibleDiv").removeClass("visibleDiv").addClass("hiddenDiv");
        if(wasHidden){
            theDiv.removeClass("hiddenDiv").addClass("visibleDiv");
        }
    }
)

div div.hiddenDiv {
    display: none;
}
div div.visibleDiv {
    display: inline:
}

<input id="i1" type="button" value="one" />
<input id="i2" type="button" value="two" />
<div>
    <div id="di1" class="hiddenDiv ">This is the first one.</div>
    <div id="di2" class="hiddenDiv ">And here we have number two.</div>
</div>

The technique can be summed up as follows

1. Start off with all divs hidden
2. When a click occurs, look at the relevant div, to see if it was hidden
3. Remove the visible class from all divs that have it, and replace with the hidden class
4. If the div was previously hidden, remoe the hidden class and replace with the visible class.