Wednesday, 6 June 2012

Hiding and showing in single button using jquery



<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>


<script type="text/javascript">
$(document).ready(function(){
  $("#b").click(function(){


  if($("p").css('display') == 'block'){
    $("p").hide(1000);
    $(this).val("show");
   }else{
    $("p").show(1000);
    $(this).val("hide");
   }
  });
  $("#s").click(function(){
    $("p").show(1000);
   $("#s").attr("value", "Hide")
   $("#s").attr("id", "b")
  });
});
</script>
</head>
<body>
<input type="button" name="Hide" id="b" value="Hide">
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

No comments:

Post a Comment