Skocz do zawartości

[Poradniki] Prosty toggler bez JavaScript


Akaexus

Rekomendowane odpowiedzi

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/

  • Like 1
Odnośnik do komentarza

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ę
  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...