Show Hide Div tag in Javascript and JQuery

I have been playing with JQuery for the past few days. After getting tired of writing lines and lines of code in javascript, Jquery does the same functionality with a couple of lines.
Let’s see a small comparison between a javascript code and JQuery.
Task: To show and hide a div tag with contents in it.
Most web developers come across this situation to show and hide the div contents – Let’s simply say it as toggle div tags

Now, comes the javascript code to toggle div tag
HTML

<a onclick="toggleDivTag(‘testfooter’);" href="#">Click here </a>
<div id="testfooter">This is foo</div>

Javascript

<script type="text/javascript">// <![CDATA[
     function toggleDivTag(id) {        var divID = document.getElementById(id);        if(divID.style.display == 'block')           divID.style.display = 'none';        else           divID.style.display = 'block';     }
// ]]></script>

Explanation:

When you click on the link, the javascript function toggleDivTag was called along with a parameter, here ‘testfooter’. This parameter is the id of the div tag,. This div element should be closed and opened, when clicked.
In the javascript code, we are assigning the id of the particular div tag to a variable divID. Now, we are checking whether the div tag is visible or closed. If the div is shown, then we are applying the style as “none” to hide the div tag and vice versa.

Now, comes our hero JQuery.
JQuery can be downloaded from http://docs.jquery.com/Downloading_jQuery#Download_jQuery
HTML

<a id="clickhere" href="#">Click here</a>
<div id="hide_this">Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents</div>

JQuery code

<script src="jquery-latest.js"></script> <script type="text/javascript">// <![CDATA[
$(document).ready(function()
{
//$('#hide_this').hide();
  $("#clickhere").click(function()
  {
$('#hide_this').toggle('slow');
});
});
// ]]></script>

Explanation:

On the first line, you are including the jQuery library.

<script src="jquery-latest.js"></script>

Then, comes our code. The ready function will start working once the entire page gets loaded.

$(document).ready(function()

Then, when you click on the link, contents in the “hide_this” div will be shown. Again clicking on the same link, it toggles it action. Also, it comes with animated effect, that you could enjoy.

$("#clickhere").click(function()
{
$(‘#hide_this’).toggle(’slow’);
});

Note: if you need to hide the contents, while the page is getting loaded, you can uncomment the below line in jquery.

//$(‘#hide_this’).hide();

In Javascript, you can modify the HTML code as

<div id="testfooter" style="display: none;">This is foo</div>