Question

I’m trying to show/hide an element by clicking on another. For simplicity, I am going to refer to each div as either A, B, C, or D, as labeled. An example of what I have so far can be viewed here: http://jsfiddle.net/Yh8Ar/1/. So I have…

<div id="event">

    <div id="structure1">...</div>    // A
    <div class="structures">...</div> // B

    <div id="structure2">...</div>    // C
    <div class="structures">...</div> // D

    // more of these div pairs down here

</div>

… and I want the functionality to be such that when I click on div A, div B toggles between visible and hidden ( show()/hide() )… BUT… I also want div B, when visible, to hide whenever I click anywhere else in the window, except for clicking div B itself. The same goes for the other div pair (C,D)… click on C, D toggles and clicking anywhere on the page will hide D.

The tricky part here is if div B is displayed and I click on div C, I want div B to hide and div D to show. So, clicking anywhere on the page EXCEPT FOR on divs B,D will hide divs B,D respectfully. But I also want to be able to toggle div B by repeatedly clicking on div A as well as toggling div D by repeatedly clicking on div C. Only one div should be displayed at a time.

The jQuery I have so far, thanks to Nick Craver, is…

$(function() {

    $(document).click(function() {

        $('.structures').hide();
    });
    $('#fraction').click(function(event) {

        event.stopPropagation();
        $(this).next().toggle();
    });
    $('.structures').click(function(event) {

        event.stopPropagation();
    });
});

… but I can’t figure out how to distinguish between the div pairs, meaning, I can’t figure out how to hide div B and show div D when clicking on div C. Here’s an example of how it works now and all the appropriate code: http://jsfiddle.net/Yh8Ar/1/

Thanks,
Hristo

Answer 1

You can combine your handlers but you need to add one as well, like this:

$(function() {
  $(document).click(function() {
    $('#structures').hide();
  });
  $('#structure').click(function(event) {
    event.stopPropagation();
    $('#structures').show();
  });
  $('#structures').click(function(event) {
    event.stopPropagation();
  });
});

This also stops the event propagation when clicking inside the #structures div itself (as well as the click handler already stopping the hide from the button itself), you can test it here.

If you want to have the button be a toggle instead, change .show() to .toggle().