Click here to Skip to main content
15,560,390 members
Please Sign up or sign in to vote.
2.00/5 (1 vote)
See more:
Hi friends,
I have two buttons on Hide, Show form and a hyperlink(JQuery).
On click of hide the JQuery should hide and on click of show JQuery should be displayed.
Following is my code, can anyone tell where code is going wrong..??


HTML
<html>
<head>
   <script type="text/javascript" src="JQuery.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <button id="btnHide">Hide</button>&nbsp;
        <button id="btnShow">Show</button><br /><br />
        <a href="#">JQuery</a>
    </div>
    <script type="text/javascript" language="javascript">
        $("#btnHide").click(function(){
        $("a").hide("slow");
        });
   
        $("#btnShow").click(function () {
        $("a").show(2000);
        });
    </script>
    </form>
</body>
</html>
Posted
Updated 20-Oct-11 0:33am
v2

Hi, Just wrap your Jquery code inside $(document).ready()...


JavaScript
$(document).ready(function()
{
        $("#btnHide").click(function(){
            $("#jqLink").hide("slow");
        });
        $("#btnShow").click(function () {
            $("#jqLink").show(2000);
        });

});



Hope this will help...
 
Share this answer
 
Well, first you're missing the "type" attribute for your buttons - they should be defined like this:

XML
<button type="button" id="btnHide">Hide</button>
<button type="button" id="btnShow">Show</button>


The other problem with this code is that it'll hide all anchors (<a>..</a>) on your page. You should probably give the "jquery" link an ID and only hide this particular link. So, your code imho should look like:


XML
<html>
<head>
   <script type="text/javascript" src="JQuery.js"></script>
</head>
<body>
    <form id="form1"  runat="server">
        <button type="button" id="btnHide">Hide</button>
        <button type="button" id="btnShow">Show</button>
        <a id="jqLink" href="#">JQuery</a>
        <script type="text/javascript" language="javascript">
        $("#btnHide").click(function(){
            $("#jqLink").hide("slow");
        });
        $("#btnShow").click(function () {
            $("#jqLink").show(2000);
        });
        </script>
    </form>
</body>
</html>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900