Question

I’m trying to get a form to show and hide using two different triggers. One element when clicked shows the div holding the form, then the cancel button of the form hides the div.

I’ve tried several options and cannot get this to work so I’ve stripped it down and put the code here on jsfiddle (link)

The containing div shows but then won’t hide… any suggestions?

Answer 1

Just return false from the cancel handler.

Otherwise the click event bubbles, and since the button is nested inside the li element that opens the form, both elements receive the click.

The cancel button tries to hide it and then the li re-opens it..

   $("#h-nav li#hn-contact #cancel").click(function() {
          $("#h-nav li#hn-contact").find("div.dd").hide();
           return false;
      });

demo at http://jsfiddle.net/gaby/5CpeW/2/

---

Notice, since id are unique, you do not have to describe the hierarchy in your jquery selectors. Just use a selector from the last id and forward..