Monday, 12 March 2012

Hide the image using toggle function


Create two file
1.slide.js
2. slide.html


In  slide.js file  add the following code

$(document).ready(function(){

$('#imgplus').toggle(
               function() {
                var srcValue = "images/tall-up-arrow.gif"
                $('#imgplus').attr('src', srcValue);
                $('#panel').hide('fast');

            },
            function() {
                var srcValue = "images/tall-down-arrow.gif"
                $('#imgplus').attr('src', srcValue);
                $('#panel').show('fast');
            }
         
            );


});

In  slide.html file  add the following code



<html>
<head>
<title>jQuery Hello World </title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="slide.js"></script>
</head>



<body>


<img src="images/tall-down-arrow.gif" id="imgplus"  />
<div id="panel">
<p id="message">you can see this </p>
</div>


</body>


</html>


No comments:

Post a Comment