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.
:)
Link to this post!