Posted By

Malgrim on 06/07/09


Tagged

toggle dispaly


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Malgrim


toggle Display


 / Published in: JavaScript
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Toggle Display in Javascript</title>
  6. <style type="text/css"> /* normalerweise in eigener .css-Datei */
  7. #container {
  8. border: 1px outset #BBBBBB;
  9. padding: 2px;
  10. width: 15em;
  11. }
  12. #loginBox {
  13. display: none;
  14. border: 1px inset #BBBBBB;
  15. padding: 2px;
  16. }
  17. .c {
  18. text-align: center;
  19. }
  20. </style>
  21. <script type="text/javascript" language="javascript"> /* normalerweise in eigener .js-Datei */
  22. function getStyle(oElm, strCssRule) {
  23. var strValue = "";
  24. if(document.defaultView && document.defaultView.getComputedStyle){
  25. strValue = document.defaultView.getComputedStyle(oElm,"").getPropertyValue(strCssRule);
  26. } else if(oElm.currentStyle) {
  27. strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
  28. return p1.toUpperCase();
  29. });
  30. strValue = oElm.currentStyle[strCssRule];
  31. }
  32. return strValue;
  33. }
  34.  
  35. function toggleDisplay(element) {
  36. if (getStyle(element,'display') == "none") {
  37. element.style.display = "block";
  38. } else {
  39. element.style.display = "none";
  40. }
  41. }
  42. </script>
  43. </head>
  44. <body>
  45. <form id="login" method="post" action="#">
  46. <div id="container">
  47. <p class="c"><a href="#" onclick="toggleDisplay(document.getElementById('loginBox')); return false;">Login</a></p>
  48. <div id="loginBox">
  49. <table>
  50. <tr><td><label for="nameField">Name:</label></td><td><input id="nameField" type="text" name="name" /></td></tr>
  51. <tr><td><label for="passField">Passwort:</label></td><td><input id="passField" type="password" name="password" /></td></tr>
  52. </table>
  53. <p class="c"><input type="submit" value="Login" /></p>
  54. </div>
  55. </div>
  56. </form>
  57. </body>
  58. </html>

Report this snippet  

You need to login to post a comment.