Przełącznik widoczności sekcji (toggle display)
Treść zadania
W szablonie znajduje się przycisk <button id="btnPrzepis">Pokaż / Ukryj przepis</button> oraz blok <div id="blokPrzepisu" style="display: none;">Składniki: mąka, mleko, jajka.</div>. Napisz skrypt, który przy każdym kliknięciu sprawdza aktualną wartość style.display: jeśli wynosi 'none', zmienia ją na 'block'; w przeciwnym razie przywraca 'none'.
Co będzie oceniane
- Pobranie przycisku #btnPrzepis i bloku #blokPrzepisu.
- Poprawne warunkowe badanie bieżącej wartości style.display.
- Przełączanie między wartościami 'block' i 'none'.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (2)
- Pierwsze kliknięcie ujawnia blok przepisu — atrybut #blokPrzepisu = display: block
- Drugie kliknięcie ponownie ukrywa blok przepisu — atrybut #blokPrzepisu = display: none
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Przełączaj właściwość display bloku #blokPrzepisu po kliknięciu #btnPrzepis
Wskazówki
Wskazówka 1
Skorzystaj z instrukcji warunkowej badającej bieżącą wartość właściwości odpowiadającej za wyświetlanie bloku.
Wskazówka 2
W reakcji na kliknięcie przycisku sprawdź, czy wartość właściwości jest równa ciągowi znaków oznaczającemu ukrycie. Jeśli tak, zmień ją na blokową, a w bloku alternatywnym przypisz ponownie ukrycie.