hide and show div tag using jquery and javascript

first we are going to include jquery library for show and hide the div tag

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

we are going to show and hide the div tag using jquery function

<script language="javascript">
$(document).ready(function() {
    $("#showID").click(function() { $("#divMsg").show(1000);});
    $("#hideID").click(function() { $("#divMsg").hide(1000);});

creating two link to show and hide based on the link ids

<div><a href="javascript:;" id="showID">Show</a> | 
<a href="javascript:;" id="hideID">Hide</a></div>

next we are going to create div tag which display show and hide the content from it

<div id="divMsg">Your content will comes here...</div>

Now same thing we are going to do in javascript, this function will show and hide the div tag

<script language="javascript"></pre>
function hide_show() {
	var str = document.getElementById('divMsgJs').style.display;
	if(str=="none") {
		document.getElementById('divMsgJs').style.display = "block";
		} else {
		document.getElementById('divMsgJs').style.display = "none";
<div><a href="javascript:;" onclick="hide_show();">Show</a> | 
<a href="javascript:;" onclick="hide_show();">Hide</a></div>
<div id="divMsgJs">Your content will comes here...</div>


[ Download ] | [ Demo ]