[RESOLVED] How can hide or show the DIV Element by one button

**lionking** · 04-20-2009 09:08 PM

I want to click on button to show DIV Element and I want to click once again on the same button to hide the DIV Element

This function for Show DIV

Code:

function show_menu(id){
    document.getElementById(id).style.display = "block";
}

and This function for hide DIV

Code:

function hide_menu(id){
    document.getElementById(id).style.display = "none";
}

What is the event which shows and hide the DIV on the same button and also I have experiment i'm added Two functions with one event, but did not work

The event like ( Toggle ) in jQuery

Can anyone help me

**TheBearMay** · 04-20-2009 09:46 PM

Code:

<button onclick="if (document.getElement('idOfDiv').style.display=='none') show_menu('idOfDiv'); else hide_menu('idOfDiv');">Show/Hide</button>

**lionking** · 04-21-2009 09:45 AM

Thank you Mr TheBearMay for help, I've tested the code but did not work

Is there any other way

**TheBearMay** · 04-21-2009 11:07 AM

Small typo on my part (forgot the "ById"):

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function hide_menu(id){
    document.getElementById(id).style.display = "none";
}
function show_menu(id){
    document.getElementById(id).style.display = "block";
}
</script>
</head>

<body>
<button onclick="if (document.getElementById('idOfDiv').style.display=='none') show_menu('idOfDiv'); else hide_menu('idOfDiv');">Show/Hide</button>

<div id="idOfDiv"> Show me, hide me, anyway you want me....</div>
</body>
</html>

**lionking** · 04-21-2009 01:33 PM

Thank You Mr TheBearMay , I'm very Happy to help me

**maxspeed200** · 02-21-2012 04:19 AM

thank for this nice java but how can i make it hidden first i mean i want there is nothing appear when the page is load and and then whine i click the button make it show

your code now work show and when i click the button work hide i want work hide first n then show

i need your help pleas @!!!!!

Thread: [RESOLVED] How can hide or show the DIV Element by one button

Thread Tools

Display

[RESOLVED] How can hide or show the DIV Element by one button

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions