Question

I have the following layout:

<div id="content">
  <div id="img"><img src=""></div>
  <div id="main">Some content</div>
  <div id="btn" class="hidden"><button>Submit</div>
  <div class="hidden">Some other stuff</div>
</div>

I have jQuery click event tied to the content div that expands it and makes the hidden divs (the button and more content) visible. I also have an event tied to the button that activates a modal on click.

The expand/collapse of the div works without a problem using hide/show methods. The problem is after clicking on the button, the div collapses even though the modal is activated.

So after clicking on the Submit button, the modal pops up but in the background the main div is collapsed. I am trying to keep the main div open if the Submit button is pushed.

I tried setting the z-index fields on the button and the containing div to a value higher than what’s on content div; this did not help.

How could I keep the functionality of clicking anywhere in the collapsed div (where the button and extra content are not visible) expands that div and clicking on the button in the expanded div activate the modal dialog without collapsing the main div?

Thank you

Answer 1

You have to prevent the event from bubbling up. When you click the button, the click event bubbles up the DOM tree and triggers other event handlers.

Have a look at event.stopPropagation():

$('button').click(function(event) {
    event.stopPropagation()
    // modal stuff
});

---

You can also ignore all clicks that don’t originate at the #content div:

$('#content').click(function(event) {
    if(event.target == this) {
       // hide/colapse
    }
});

This might be better if you want to click “anywhere” inside the div without hiding it.