Curs jQuery - lectia 9 - selectorul hidden

In articolul trecut am introdus cuvantul cheie “this” in jQuery si am vazut cum putem imbunatati functia .toggle prin schimbarea textului pentru butonul ce genereaza animatia (aratarea si ascunderea detaliilor).

In exemplul din articolul trecut detaliile erau initial vizibile, iar clickand pe buton le puteam alterna vizibilitatea DEMO

Dar in cele mai multe cazuri va trebui sa replicam varianta inversa: pentru o punere in pagina mai eficienta a informatiilor si pentru economisirea de spatiu va trebui sa avem initial detaliile ascunse pentru ca vizitatorii interesati sa le poata mai apoi vizualiza facand un click pe buton sau trecand cu mouse-ul asupra lor.

Pentru acest scop vom folosi selectorul :hidden, dupa ce in articolul trecut am utilizat selectorul :visible deoarece detaliile erau initial vizibile.

In primul rand va trebui sa ne asiguram ca elementul div #detalii este ascuns vizualizarii. Pentru acest lucru vom insera o noua clasa css si o vom aplica elementului. In acest mod vom avea acest div initial ascuns vizualizarii:

<style>
.hidden {
display:none;
}
</style>

Mergand mai jos in codul nostru ne vom asigura ca valoarea initiala a butonului este setata pe “Arata Detalii” deoarece detaliile sunt intial ascunse, deci vom avea nevoie de aceasta valoare initiala.

<div id="wrap">
<h3>Evenimentele in jQuery - Actiunea TOGGLE imbunatatita cu schimbarea textului butonului</h3>
<input type="button" id="toggle" value="Arata Detalii" />
<div class="hidden" id="detalii"><p>Detalii despre evenimentele in jQuery</p></div>
</div>

Trecand la codul jQuery vom inversa selectorul. Daca in articolul trecut, cand detaliile erau initial vizibile am utilizat selectorul :visible, de aceasta data vom utiliza selectorul :hidden deoarece avem aplicata regula css de display: “none” asupra elementului, deci in faza initiala va fi ascuns. In formularea conditiei if / else pentru schimbarea textului asociat butonului vom avea ca prima optiune textul pentru faza in care detaliile sunt ascunse, iar ca faza secundara textul pentru ascunderea detaliilor.

<script>
$(document).ready(function(){
});
$('#toggle').click(function() {
$("#detalii").toggle();
if ($("#detalii").is(":hidden")) {
$(this).val("Arata Detalii");
} else {
$(this).val("Ascunde Detalii");
}
}); 
</script>

Mai multe detalii despre selectorul :hidden in jQuery.

Pagina DEMO pentru acest articol – actiunea toggle cu ascunderea initiala a elementului animat

CUPRINS MINI-CURS JQUERY