Pokaż więcej i mniej (show/hide) treści na stronie z pomocą CSS

Czas czytania: 3 minut

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.

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