Toggle button

  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

I have a div that for the most part is hidden however I have a button to show it, at the moment you click once to show the div and double click to hide it but I want it to work as a toggle i.e. One click shows it and one click closes it here is the code for the button as it is right now.
What do I need to to the get the desired effect?
Code: [ Select ]
<input type="button" value="Show/hide login"
onclick="document.getElementById('login').style.display='block';"
ondblclick="document.getElementById('login').style.display='none';" />
  1. <input type="button" value="Show/hide login"
  2. onclick="document.getElementById('login').style.display='block';"
  3. ondblclick="document.getElementById('login').style.display='none';" />
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

How about something like this?

Code: [ Select ]
 
<html>
    <head>
        <script language="JavaScript">
        function toggleVis(id)
        {
            var elem = document.getElementById(id);
            elem.style.display = (elem.style.display == 'none') ? 'block' : 'none';
        }
        </script>
    </head>
    <body>
        <input type="button" value="Show/hide login" onClick="toggleVis('myDivId');" />
        <div id="myDivId" style="height:200px;width:200px;background-color:red;">&nbsp;</div>
    </body>
</html>
 
  1.  
  2. <html>
  3.     <head>
  4.         <script language="JavaScript">
  5.         function toggleVis(id)
  6.         {
  7.             var elem = document.getElementById(id);
  8.             elem.style.display = (elem.style.display == 'none') ? 'block' : 'none';
  9.         }
  10.         </script>
  11.     </head>
  12.     <body>
  13.         <input type="button" value="Show/hide login" onClick="toggleVis('myDivId');" />
  14.         <div id="myDivId" style="height:200px;width:200px;background-color:red;">&nbsp;</div>
  15.     </body>
  16. </html>
  17.  

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 71 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.