Loading ...

jQuery: Show and hide image on button click | CodeAsp.Net

jQuery: Show and hide image on button click

 /5
0 (0votes)

In this blog I will show how to show/hide image on button's click. I saw this question on forums today and I decided to write a quick blog on this. In order to do so I have used jQuery's toogle function. On click of button the image will be made show and hide and accordingly the text of the button will change to show or hide according to the visibility of image. Below is the sample code: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script type="text/javascript">

        $(function() {
            $('#btnFoo').toggle(function() {
                $('#myImage').toggle('slow');
                this.value = 'Show';
                return false;
            },
            function() {
                $('#myImage').toggle('slow');
                this.value = 'Hide';
                return false;
            });
        });

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:Button ID="btnFoo" runat="server" Text="Hide" />
    <br />
    <asp:Image runat="server" ID="myImage" ImageUrl="Balloon.bmp" />
    </form>
</body>
</html>

 


Hope this helps!

 

 

Comments (no comments yet)

Top Posts