Question

I’m trying to toggle a parent div when the div itself is being clicked. But I want to prevent child divs or elements from triggering the function. How can I do that?

//javascript (jquery enabled)
function toggle(parent_id) {
  $('.'+parent_id).toggle();
}
<!-- html -->
<div class="parent parent1" onclick="toggle('parent1')">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

<div class="parent parent2" onclick="toggle('parent2')">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

Thanks!

UPDATE: I’m trying to toggle the specific div, hence using a function to pass the specific parent id.

ie. if I click on parent1, parent1 toggles;
if I click on parent2, parent2 toggles

Answer 1

The following should do the job:

$(".parent").click(function(e) {
    if (e.target == this) {
        $(this).toggle();
    }
});

DEMO: http://jsfiddle.net/Md4U5/