abuyusuf35
asked on
Show Hide Functionality(Javascript)
Hi - I need someway of showing and hiding elements on screen based on a button click etc - is there a way in JavaScript to do this ?
Thanks
Thanks
another one : http://jsfiddle.net/r3SQd/1/
<input id="button1" type="button" value="hide" />
<div id="elementInside">
HERE ALL YOUR ELEMENT TO SHOW/HIDE
</div>
<script>
window.onload = function() {
document.getElementById("button1").onclick = function() {
var els = document.getElementById("elementInside");
if( els.style.display == "none") {
els.style.display = "block";
this.value = "hide";
}
else {
els.style.display = "none";
this.value = "show";
}
}
}
</script>
yes, you can put an onclick function on the button or any other element that you want to use and then the easiest way is for the javascript to manipulate the css.
So then you do something like this
document.getElementById('i dofelement tohid').st yle.displa y="none";
You can do this with any css style property.
So then you do something like this
document.getElementById('i
You can do this with any css style property.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
with jQuery : http://jsfiddle.net/r3SQd/8/
<a href="javascript:void(0)" id="button1" >hide</a>
<div id="elementInside">
HERE ALL YOUR ELEMENT TO SHOW/HIDE
</div>
<script src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script>
$(document).ready(function() {
$("#button1").click(function() {
$("#elementInside").toggle();
$(this).html( $("#elementInside").is(":visible")?"hide":"show" );
})
})
</script>
here is another simple sample using jQuery
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
<script>
function btnClick(){
$("#divTest").toggle();
}
</script>
<div id=divTest style="width:200;border:1px solid gray">HainKurt</div>
<button onClick="btnClick()">Toggle div</button>
Open in new window
Open in new window