How to stop a button from toggling within div tag using jQuery?

I have a link which triggers div tag to toggle. The problem is that I don't want my button(which is within the div), to toggle. How do I stop it from togglin开发者_如何学Cg?

This is my html code:-

<a href="#" id="uploadVideoLink" class="menuLink"> Upload Videos </a>
<div id="uploadVideos" class="menu">
  <input name="submit" type="submit" value="Upload" id="btn" />
</div>

This is my jQuery code:-

$(document).ready(
  function upload(){$("#uploadVideoLink").click(
     function uploadTog(){$("#uploadVideos").toggle();}     
  );}   
);  

---

You need to get it outside the <div> you can't hide an element without all the elements inside of him. It's just the way DOM is.

---

If you mean that you don't want to hide the button that's not possible i think as long as the button is inside the div becuase toggle() assign display: none; to the div thus hiding everything inside it

One thing you could do is this one (this would toggle all elements inside the div but not the button):

<a href="#" id="uploadVideoLink" class="menuLink"> Upload Videos </a>
<div id="uploadVideos" class="menu">
    <div>sometext</div>
    <input name="submit" type="submit" value="Upload" id="btn" />
    <div>sometext</div>
</div>

$(document).ready(

function upload() {
    $("#uploadVideoLink").click(

    function uploadTog() {
        $("#uploadVideos *:not(#btn)").toggle();
    });
});

fiddle http://jsfiddle.net/K5NL4/

---

If I understand correctly, you will need to move the button outside the div. With a little styling you should be able to get the interface to look right.

Either position the toggled-on DIV on top of the outside button, and place another identical button inside the DIV on top of the original button. Or position the toggled-on DIV adjacent to/just below the button, and just create a border that makes it seem like the button is now 'part' of the toggled DIV.