<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Show/Hide Divs using JavaScript</title> <script type="text/javascript" language="javascript"> function addEvent(obj, evType, fn, useCapture){ if (obj.addEventListener){ obj.addEventListener(evType, fn, useCapture); return true; } else if (obj.attachEvent){ var r = obj.attachEvent("on"+evType, fn); return r; } else { alert("Handler could not be attached"); } } function togglediv(e) { if (!e) return; var container = document.getElementById(e); var status = container.style.display; if (status == 'none') { container.style.display = 'block'; } else { container.style.display = 'none'; } } function addListeners() { if(!document.getElementById) return; var toggleButton = document.getElementById('togglebutton'); addEvent(toggleButton,'click', function(event) { togglediv('togglediv') }, false); } addEvent(window, 'load', addListeners, false); </script> </head> <style type="text/css" media="screen"> /* <![CDATA[ */ body { font: 0.7em/160% "Lucida Grande", Verdana, Helvetica, sans-serif; } #togglediv { background: #F9EE98; border: 1px solid #D9C589; display: none; padding: 0.5em 1em; } /* ]]> */ </style> <body> <p><a href="#" id="togglebutton">Toggle</a></p> <div id="togglediv"> A div which's visibility can be toggled using Javascript. </div> </body></html>
Sorry, das das so wirr aussieht. Das obige Problem konnte ich mittlerweile lösen. Hätte aber eine neue Frage: Wenn du dieses Codebeispiel ausprobieren könntest, dann merkst du, dass du auf Toggle doppelt klicken musst, damit was passiert.
Was muss ich ändern, damit alles mit einem gewöhnlichen Klick passiert?
Danke und Grüße Mattikim