The code is this:
<script type="text/javascript">
function showHide(divId){
var theDiv = document.getElementById(divId);
if(theDiv.style.display=="none"){
theDiv.style.display="";
}else{
theDiv.style.display="none";
}
}
</script>
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="">What is given above is one JavaScript method called showHide(divId) a button to test and the text content to be tested. See, I've given an unique ID to the div tag and kept 'style' empty. Clicking the button will change the style to style="display:none;" hiding the content. You can test this pasting the code in to a HTML file and opening it. Each time you click, "Test It" button, it will show/hide the "TEST ME!" text.
<h1>TEST ME!</h1>
</div>
This can be used to show/hide any thing in a given page such as tables, paragraphs, divisions etc. For, tags except div, just put them inside a div tag and do as said above.
Thanks so much for this code!!
ReplyDeleteThis was just what i needed.You made my day..
gr8
ReplyDeletethis show and then hide but i need hide and then show
ReplyDeleteyou should change css and js code .... like this
Deletedisplay:none; for div that you want hide first and
function showHide(divId){
var theDiv = document.getElementById(divId);
if(theDiv.style.display=="block"){
theDiv.style.display="";
}else{
theDiv.style.display="block";
}
}
you should change the css first like this .... display:none; for div that u want to hide
Deleteand js should like this
function showHide(divId){
var theDiv = document.getElementById(divId);
if(theDiv.style.display=="block"){
theDiv.style.display="";
}else{
theDiv.style.display="block";
}
}
Thank uuuuu :9
ReplyDeletecan we do that in class tag and display them
ReplyDelete$("a.cabinid").click(function(){
$("#airfilter").hide();
$("#oilfilter").hide();