first we are going to include jquery library for show and hide the div tag
[sourcecode language=”javascript”]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
[/sourcecode]
we are going to show and hide the div tag using jquery function
[sourcecode language=”javascript”]
<script language="javascript">
$(document).ready(function() {
$("#showID").click(function() { $("#divMsg").show(1000);});
$("#hideID").click(function() { $("#divMsg").hide(1000);});
});
</script>
[/sourcecode]
creating two link to show and hide based on the link ids
[sourcecode language=”html”]
<div><a href="javascript:;" id="showID">Show</a> |
<a href="javascript:;" id="hideID">Hide</a></div>
[/sourcecode]
next we are going to create div tag which display show and hide the content from it
[sourcecode language=”html”]
<div id="divMsg">Your content will comes here…</div>
[/sourcecode]
Now same thing we are going to do in javascript, this function will show and hide the div tag
[sourcecode language=”javascript”]
<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";
}
}
</script>
[/sourcecode]
[sourcecode language=”html”]
<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>
[/sourcecode]
[wp_ad_camp_1]