@@saskia > ~~~js > <script>$('#button-login').click(function(){ > $('#login').toggle(); > }); > </script> > ~~~ > > Das Problem bei diesem Script ist jedoch, dass schon beim Aufrufen der Seite das Login-Fenster zu sehen ist und erst bei einem Klick auf "Login" es verschwindet. [`toggle()`{: .language-js}](http://api.jquery.com/toggle/) schaltet die Sichtbarkeit um. Du musst das Element per Stylesheet initial unsichtbar machen: ~~~css #login { display: none } ~~~ Damit das auch bei Screenreadern funktioniert, sollte das Element [als Dialogbox gekennzeichnet](http://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box) werden: ~~~html <div id="login" role="dialog"> ~~~ **Ergänzung:** Wenn das Login auch ohne JavaScript funktionieren soll, darf das ELement natürlich nicht so versteckt werden, sondern nur dann, wenn JavaScript ausgeführt wird: entweder ~~~javascript $('#login').hide(); ~~~ oder dem `html`-Element eine Klasse `js` geben ~~~javascript $('html').addClass('js'); ~~~ und per Stylesheet das Element nur verstecken, wenn diese Klasse gesetzt ist: ~~~css .js #login { display: none } ~~~ LLAP 🖖 -- Ist diese Antwort _anstößig_? Dann könnte sie [_nützlich_](http://forum.selfhtml.org/self/2015/jun/21/select-felder/1643860#m1643860) sein.

@@saskia > ~~~js > <script>$('#button-login').click(function(){ > $('#login').toggle(); > }); > </script> > ~~~ > > Das Problem bei diesem Script ist jedoch, dass schon beim Aufrufen der Seite das Login-Fenster zu sehen ist und erst bei einem Klick auf "Login" es verschwindet. [`toggle()`{: .language-js}](http://api.jquery.com/toggle/) schaltet die Sichtbarkeit um. Du musst das Element per Stylesheet initial unsichtbar machen: ~~~css #login { display: none } ~~~ Damit das auch bei Screenreadern funktioniert, sollte das Element [als Dialogbox gekennzeichnet](http://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box) werden: ~~~html <div id="login" role="dialog"> ~~~ **Ergänzung:** Wenn das Login auch ohne JavaScript funktionieren soll, darf das ELement natürlich nicht so versteckt werden, sondern nur dann, wenn JavaScript ausgeführt wird: entweder ~~~javascript $('#login').hide(); ~~~ oder dem `html`-Element eine Klasse `js` geben $('html').addClass('js'); und per Stylesheet das Element nur verstecken, wenn diese Klasse gesetzt ist: ~~~css .js #login { display: none } ~~~ LLAP 🖖 -- Ist diese Antwort _anstößig_? Dann könnte sie [_nützlich_](http://forum.selfhtml.org/self/2015/jun/21/select-felder/1643860#m1643860) sein.

@@saskia > ~~~js > <script>$('#button-login').click(function(){ > $('#login').toggle(); > }); > </script> > ~~~ > > Das Problem bei diesem Script ist jedoch, dass schon beim Aufrufen der Seite das Login-Fenster zu sehen ist und erst bei einem Klick auf "Login" es verschwindet. [`toggle()`{: .language-js}](http://api.jquery.com/toggle/) schaltet die Sichtbarkeit um. Du musst das Element per Stylesheet initial unsichtbar machen: ~~~css #login { display: none } ~~~ Damit das auch bei Screenreadern funktioniert, sollte das Element [als Dialogbox gekennzeichnet](http://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box) werden: ~~~html <div id="login" role="dialog"> ~~~ LLAP 🖖 -- Ist diese Antwort _anstößig_? Dann könnte sie [_nützlich_](http://forum.selfhtml.org/self/2015/jun/21/select-felder/1643860#m1643860) sein.