Databases
StackOverflow2013
Postsdbo
POTrouble toggling the visibility of multiple divs, since toggle() tracks each element separately
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTrouble toggling the visibility of multiple divs, since toggle() tracks each element separately
    text
    copied!<p>I have a series of <code>input</code> 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 ( <code>display: none</code> ) to begin. </p> <p>If you click a button, its associated content is displayed. If you click it again, the content disappears. This is done with <code>toggle()</code>. The problem is that if you click one button and then click the other button, <strong>both</strong> divs are now visible. </p> <p>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.</p> <p>To solve this, I used <code>siblings()</code> to make sure all content <code>divs</code> are invisible before a new content divs appears.</p> <p>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, <strong>and <code>toggle()</code> keeps track of each button separately</strong>)</p> <p>How can I implement this type of content toggling without running into these issues?</p> <p>(On the real page there are an unknown number of button / div combos and the user can click on them in any order)</p> <p><a href="http://jsfiddle.net/DtSfP/" rel="nofollow noreferrer"><strong>Here's an example of the problem code (click 1, 2, then 1)</strong></a></p> <p>Thanks!</p> <hr> <p>Looks like the answer may be something using <code>.trigger('click')</code> and <code>:visible</code>... just having trouble making it work.....</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload