Skocz do zawartości


Zdjęcie

[Poradniki] Prosty toggler bez JavaScript


Brak odpowiedzi do tego tematu

#1 Akaexus

Akaexus

  • Gracz
  • 551 postów
  • Nick SA-MP:Krzysztof Golder

Napisano 07 sierpień 2017 - 11:58

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/
  • TenDan lubi to




Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych