Want to try out a simple hide and show toggle using jQuery? The example given below shows how you can simply hide and show a paragraph in html using jQuery. Try it out!
Dollar ($) sign is a shortcut for jQuery. But sometimes it may have conflict with some other JavaScript library functions which also uses $ sign. What to do then?
Its simple. Use jQuery noConflict() method for creating any custom names. See for yourselves.
In some special cases you may need to disable the Right Click option on HTML page you are using.
An easy way to do it using jQuery is follows. Use the following code in the HTML page where you want to disable Right Click.
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.