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 obrazka.
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.
Co znajdziesz w tym wpisie
Efekty 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.dark
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.
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i|Montserrat:400,400i&subset=latin-ext'); body{ background: #7db9e8; /* Old browsers */ background: -moz-linear-gradient(top, #7db9e8 0%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #7db9e8 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #7db9e8 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ font-family: 'Lato', sans-serif; } .contener{ margin: 0 auto 50px; width: 100%; max-width: 500px; padding: 10px; border-bottom: 5px solid #1E5799; background: #fff; box-shadow: 6px 5px 19px 2px #3d3d3d; }
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:
<div class="contener"> <input type="checkbox" class="read-more-state" id="post-1" /> <p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p> <label for="post-1" class="read-more-trigger"></label> </div>
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:
<div class="contener"> <input type="checkbox" class="read-more-state" id="post-2" /> <ul class="read-more-wrap"> <li>lorem</li> <li>lorem 2</li> <li class="read-more-target">lorem 3</li> <li class="read-more-target">lorem 4</li> </ul> <label for="post-2" class="read-more-trigger"></label> </div>
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:
.read-more-state { display: none; } .read-more-target { opacity: 0; max-height: 0; font-size: 0; transition: .25s ease; } .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; } .read-more-state ~ .read-more-trigger:before { content: 'Read more'; } .read-more-state:checked ~ .read-more-trigger:before { content: 'Read less'; } .read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .5em; color: #1e5799; font-size: .9em; line-height: 2; border: 1px solid #1e5799; border-radius: .25em; font-family: 'Montserrat', sans-serif; }
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.

Kod jaki został zastosowany dla przykładu:
.show-text { display: none; } .show-text:target { display: block; }
Jak widać w momencie kiedy obiekt osiągnie stan target będzie jego ustawienia ulegną zmianie.
Kod HTML przykładu:
<div class="contener"> <ul class="exemple"> <li><a href="#exemple-1">lorem</a> <ul id="exemple-1" class="show-text"> <li>Some text</li> <li>Some text</li> <li>Some text</li> </ul> </li> <li><a href="#exemple-2">lorem 2</a> <ul id="exemple-2" class="show-text"> <li>Some text</li> <li>Some text</li> <li>Some text</li> </ul> </li> <li><a href="#exemple-3">lorem 3</a> <div id="exemple-3" class="show-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </li> </ul> </div>
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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.