Akaexus Opublikowano 7 Sierpnia 2017 Zgłoś Udostępnij Opublikowano 7 Sierpnia 2017 Prosty toggler wykorzystujący magie sibling selectorów. Wspomiany toggler wykorzystuje checkboxy oraz stan :checked do detekcji stanu togglera. Przyciskiem jest po prostu label z odpowiednim atrybutem for.<label for="toggleme"> <p>clickme</p> </label> A teraz ciekawsza rzecz - cały mechanizm togglera<input type="checkbox" id="toggleme"> <div id="toggledcontainer"> surprise </div> A teraz cała logika:#toggleme + #toggledcontainer { display: none; } #toggleme:checked + #toggledcontainer { display: block; } Label z takim samym atrybutem for jak id inputa działa jako etykieta dla niego - kliknięcie w label działa jak kliknięcie w przycisk. Jest jednak zasadniczna różnica - label możemy umieścić gdziegkolwiek na stronie. Dzięki zastosowaniu sibling selectora mamy możliwośc manipulowania elementem sąsiadującym za inputem w zależności od stanu inputa (w tym wypadku sprawdzenie stanu checked - 'odptaszkowania'). demo: https://jsfiddle.net/v9go9guf/ 1 Odnośnik do komentarza
Rekomendowane odpowiedzi
Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto
Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.
Zarejestruj nowe konto
Załóż nowe konto. To bardzo proste!
Zarejestruj sięZaloguj się
Posiadasz już konto? Zaloguj się poniżej.
Zaloguj się