Question

Problem as in subject.

Sample:

<div id="trigger">click here</div>
<div id="slider"> content goes here: form elems, divs, spans, a etc. </div>

How do I do it so far:

    $(document.body).click(function(event){ 
        var target = $(event.target); 
          if (!target.is("#trigger") && !target.is("#slider") && [all elems in slider.div...]
}

What I try to accomplish:
Avoid listing all slider.div elems by id – if possible.

Allow one elem like div with id=”close” inside of slider div to close it.

Answer 1

This can be accomplished a number of ways, but my favorite is to name the trigger something like slider_1 and give it a class if .slider. Then give the actual slider an id of slider_1_content with a class if .slider_content. This will allow you to write something like:

$(".slider").click(function() {
    $("#" + this.attr("id") + "_content") ...
});

You can then assign a close class to your close buttons/links and force them to close the parent slider like:

$(".close").click(function() {
    $(this).closest(".slider_content").hide();
});