Zwiń / Rozwiń - mechanizm show() i hide() w JQuery + toggle | JQUERY

Przychodzi ten moment kiedy na stronie statyczny widok przestaje nam już wystarczać a ruch i animacja to coś czego bardzo pożądamy. Chciałbym w tym poście przedstawić trzy przydatne funkcje JQuery, które mogą uatrakcyjnić naszą stronę oraz wpłynąć na lepszą jej organizację. Chodzi o funkcje show() , hide() oraz toggle.

Wyobraźmy sobie takowe zadanie: mamy przycisk (w formie buttona z tekstem Pokaż), który po kliknięciu ma odsłonić ukryty akapit:

<script>
function pokaz_akapit(){
    $('.ukryty_akapit').show();
}

$(document).ready(function(){
    $('#pokaz').click(pokaz_akapit);

});
</script>
<input id="pokaz" type="submit" value="Pokaż" />

<p class="ukryty_akapit" style="display:none;">
Tutaj jest ukryty tekst.
</p>

W powyższym kodzie widzimy przycisk (input type="submit"), który po kliknięciu ma odsłonić tekst niewidoczny dla użytkownika znajdujący się w akapicie o klasie "ukryty_akapit". (a dlaczego nie widać na dzień dobry tego akapitu? A no dlatego, że akapit ma własność - display:none;). W JQuery wychwytujemy klik zdarzeniem click a w parametrze podajemy funkcję pokaz_akapit (ją właśnie ma wykonać po kliku w buttona). Po kliku .... tak, tylko jedna linijka - odwołanie do elementu na którym chcemy wykonać operację i operacja , w naszym przypadku show(). Jesteśmy zadowoleni że użytkownik skontaktował się z naszą stroną interaktywnie, jednak czujemy, ze czegoś nam brakuje. Sprzydałoby się schować akapit po ponownym kliknięciu na przycisk. Tu od razu przedstawiam funkcję hide(), która chowa element na którym jest wykonana. Myślę, że poradzicie sobie z obsługą hide;a i show;a w jednym kodzie.

Czyli mamy wszystko. Możemy spokojnie odejść od komputera i zanurzyć się w swoim ulubionym napoju. Hola, Hola. Pisałem o 3 funkcjach , więc kolej jeszcze na tajemniczą funkcję toggle(). Prosto pisząc funkcja ta zawiera w sobie działanie show() i hide() jednocześnie. Czyli jak jest odsłonięty element to go schowa, a jak jest ukryty to go pokaże. A jak to w kodzie by wyglądało na gotowo? A no może być tak:

<script>
function pokaz_ukryj_akapit(){
    $('.ukryty_akapit').toggle();
}

$(document).ready(function(){
    $('#pokaz_ukryj').click(pokaz_ukryj_akapit);

});
</script>
<input id="pokaz_ukryj" type="submit" value="Pokaż/Ukryj" />

<p class="ukryty_akapit">
Tutaj jest ukryty tekst.
</p>

A tu fenomenalny przykład działania toggle ;) :

Tutaj jest ukryty tekst.