在jQuery中隐藏一个div

Question

I've just started using jQuery and I'm having some issues with it. I was trying something simple to get started, which is hiding a EMPLOYEES when a submit button is clicked. My jQuery code is:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    $(document).ready(function(){
        $("submit").click(function(){
            $(#title).toggle();
        });
    });
</script>

The html for the button is

    <input type="submit" value="SEARCH" name="submit" class="srchbutton">

When I click the button, nothing happens. I've tried a few different variations, and even tried writing it so that clicking the div itself hides it, but no luck. Any suggestions?

Answer 1

It seems you don't use selectors correctly.
If you have a div with id="title" so use this:

$("input[type=submit]").click(function(){
    $("#title").toggle();
});

Check this JSFiddle to see in action: http://jsfiddle.net/9up7e8ka/

Answer 2

Is the button of type submit or did you forget the id tag #?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    $(document).ready(function(){
        $("#submit").click(function(){
            $("#title").toggle();
        });
    });
</script>

or

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
        $(document).ready(function(){
            $("input[type=submit]").click(function(){
                $("#title").toggle();
            });
        });
    </script>

Answer 3

I would suggest using fadeToggle() than toggle(). It has a nice animation effect. Also, there should be a closing tag for external script files.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $(".srchbutton").click(function(){
             $("#title").fadeToggle();
        });
    });
</script>