With jQuery manipulation of HTML & CSS can be done very easily.
Here we are going to show how to Hide a line of text using jQuery & Show it back also.
Let’s code speak first….


<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$("#hideButton").click(function(){
$("p").hide();
});

$("#showButton").click(function(){
$("p").show();
});
});
</script>

</head>
<body>

<p>Hey! Click 'Left', I will vanish! Click 'Right', I will be back!</p>

<button id="hideButton">Left</button>
<button id="showButton">Right</button>
</body>
</html>

Note : Download and put ‘jquery.js’ on your working folder before trying out!

What these code did?

Here we have one line text, html paragraph. Two buttons ‘Left’ & ‘RIght’ and whose id’s

are ‘hideButton’ & ‘showButton’ respectively.

jQuery code identifies which button we clicked using the button id’s mentioned above and

apply the hide() or show() function to the html paragraph p.

:)

 

One Comment

  1. buttonpush June 23, 2011 at 4:14 am

    You’ve got great insights about buttonpush, keep up the good work!

     

Leave a Reply

Your email address will not be published. Required fields are marked *

 

 

 

Theme by HermesThemes

Copyright © 2018 CoderzHeaven. All Rights Reserved

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.