Pokaż więcej (show/hide) z pomocą CSS

Kategoria wpisu Kurs CSS, PHP, HTML, CSS Tagi: , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Zapewne każdy z was spotkał się na stronie internetowej z efektem rozwijającego/chowającego się (toggle) po kliknięciu np. fragment tekstu lub obrazek. W większości przypadków do uzyskania takiego efektu wykorzystywany jest JavaScrip (lub jedna z bibliotek np. jquery). Jednak to nie jedyna możliwość uzyskania takiego efektu. Nieco mniej zaawansowany efekt, ale o podobnym zastosowaniu możemy bowiem uzyskać z pomocą CSS.

W związku z tym, że już od pewnego czasu zajmuję się na blogu pokazywaniem głównie efektów działania CSS3 przygotowałam kilka przykładów. Ilustrujących dość proste działanie toggle. Jeżeli jednak chcecie w kolejnym wpisie mogę pokazać również jak w jQuery  wykonać podobny efekt.

W ramach przygotowania się do tego kursiku 🙂 przemrażałam kilka stron internetowych i forum. Na podstawie informacji na nich zawartych wybrałam kilka ciekawych przykładów.

Jak uzyskać efekt czytaj dalej w akapicie?

Powiedzmy, że chcemy ukryć fragment naszego tekstu, ale w taki sposób by czytająca go osoba mogła go później rozwinąć. Taki efekt można czasem spotkać np. na forum, w komentarzach.

Poniżej zamieściłam przykładową realizację zawierającą 3 przykłady:

See the Pen Pure CSS "Read More" Toggle by Aura (@Julka85) on CodePen.0

Zachęcam do kliknięcia w napis „Read more” czyli czytaj więcej! Jeżeli już to zrobiliście to wiecie, że każdy przykład działa nieco inaczej.

Powyższe przykłady posiadają część kodu CSS wspólnego. Chodzi np. o kontener je okalający.

 

Przykład 1 – ukrywamy fragment tekstu!

W pierwszym przykładzie będziemy ukrywać fragment tekstu. Po kliknięciu w „Read more” zostanie on jednak rozwinięty.

Struktura HTML:

Jak widać na powyższym przykładzie niewidoczny fragment został umieszczony pomiędzy znacznikami <span> z klasą read-more-target.

Przykład 2 – ukrywamy fragment listy!

Drugi przykład dotyczy już listy. Z pomocą CSS dzielimy listę na części. Kod HTML drugiego przykładu:

W tym przypadku nie dodawałam już dodatkowego elementu jedynie ukrytym elementom dodałam klasę read-more-target jest to ta sama klasa co w wcześniejszym przykładzie.

Przykład 2 i pierwszy bazują praktycznie na tym samym kodzie CSS:

 

Przykład 3 – klikalna lista z ukrytą treścią!

Ten przykład różni się od pozostałych dwóch. Wykorzystuje on bowiem jeden ze stanów (pseudo elementów) jakie może przyjmować element HTML – target.

stany przyjmowane przez elementy HTML

przykładowe stany przyjmowane przez elementy HTML

Kod jaki został zastosowany dla przykładu:

Jak widać w momencie kiedy obiekt osiągnie stan target będzie jego ustawienia ulegną zmianie.

Kod HTML przykładu:

 

Warto zobaczyć:

https://codepen.io/Idered/pen/AeBgF
https://codepen.io/ojbravo/pen/YPJpXe
http://adrianroselli.com/2015/07/showhide-script-free-which-means-css-only.html

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *