www.webdeveloper.com
Results 1 to 6 of 6

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

  1. #1
    Join Date
    Apr 2009
    Posts
    18

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

    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
    Last edited by lionking; 04-20-2009 at 09:14 PM.
    Yes No Yes No





  2. #2
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Code:
    <button onclick="if (document.getElement('idOfDiv').style.display=='none') show_menu('idOfDiv'); else hide_menu('idOfDiv');">Show/Hide</button>
    54 68 65 42 65 61 72 4D 61 79

  3. #3
    Join Date
    Apr 2009
    Posts
    18
    Thank you Mr TheBearMay for help, I've tested the code but did not work

    Is there any other way
    Last edited by lionking; 04-21-2009 at 09:47 AM.
    Yes No Yes No





  4. #4
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    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>
    54 68 65 42 65 61 72 4D 61 79

  5. #5
    Join Date
    Apr 2009
    Posts
    18
    Thank You Mr TheBearMay , I'm very Happy to help me
    Yes No Yes No





  6. #6
    Join Date
    Feb 2012
    Posts
    1
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles