Spoiler proprii cu deschidere netedă și ascunderea conținutului

Principala diferență dintre scriptul propus în acest subiect și cel discutat anterior este aspectul neted și ascunderea netedă a conținutului sub spoiler. Pentru a obține acest efect de aspect neted și ascundere netedă, trebuie să conectăm biblioteca jQuery după cum urmează:







Pentru un exemplu clar al scenariului propus, notați perechea de spoilere de mai jos:

Text sub spoiler
apare fără probleme
și dispare fără probleme
când faceți clic pe spoiler

Și acesta este un alt spoiler!
Si functioneaza, de asemenea!

Mai mult, în locul paginii unde intenționați să folosiți spoilerul, trebuie să adăugați următorul cod:


Spoiler №1 (faceți clic pentru a afișa / ascunde)

Text sub spoiler

apare fără probleme







și dispare fără probleme

când faceți clic pe spoiler


 Spoiler №2 (click pentru a afișa / ascunde)

Și acesta este un alt spoiler!

Si functioneaza, de asemenea!

Vă atragem atenția asupra faptului că fiecare spoiler trebuie să fie închis între etichete

. Acest lucru este necesar pentru ca fiecare spoiler să se deschidă și să se închidă separat, nu pe toate odată.

Pentru a vă asigura că atunci când pagina este încărcată, toți spoilerele sunt închise inițial și cursorul mouse-ului se schimbă atunci când plasați cursorul peste spoilere, trebuie să adăugați în antetul site-ului între etichete și următorul cod:

Dacă este necesar, puteți adăuga butoanele "Închideți tot" și "Deschideți tot" la spoilere. Pentru aceasta, adăugați acest cod:

onclick = $ ("div [class ^ = 'spoiler_body']"). ascunde ("normal")>
onclick = $ ("div [class ^ = 'spoiler_body']"). arată ("normal")>

Asta e tot. Ca rezultat, ar trebui să obțineți exact aceleași spoilere cu un afișaj neted și ascundeți, ca în exemplul de mai sus.

De-a lungul timpului, acest script a fost ușor rafinat și prezentat într-un subiect separat - Actualizat scriptul de spoilere cu o deschidere netedă și ascunderea conținutului.







Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: