blocuri Expandable conținut ascuns prin CSS3

Să încercăm să facem fără exces de apă, uita-te la toate acest mecanism simplu în acțiune, pe exemplul ilustrativ, același lucru poate și pentru a edita orice dacă doriți să:

În rolul comutatorului se deschide bloc cu informații suplimentare sunt folosite nu izolat și nu este indicat de textul, cu propunerea lipsită de ambiguitate să faceți clic pe ea, sunteți fără teamă sau îndoială, asigurați-vă că pentru a vedea textul ascuns)))

• Checkbox (Checkbox) - tag atribut caseta de selectare cu un tip de valoare și cu un identificator de comunicare particular
• Titlu (comutator text) - tag cu valoarea identificator unic pentru pentru atribut. (ID-ul trebuie să fie aceeași ca și tag-ul de intrare cu valoarea identificator checkbox atributului type).
• Bloc cu un conținut - tag-ul div. care va fi menținută până la vremuri mai bune, până când utilizatorul face clic, un conținut diferit de ascuns (text, imagini, etc., etc.)

Sper din explicația mea haotică, dar era clar ce întregul truc. CSS foloseste noile stiluri (folosind pseudo-verificat), pentru a arăta blocul de conținut, care până atunci a fost ascuns, numai atunci când utilizatorul face clic pe elementul care este asociat cu o casetă de validare (casetă de selectare) identificatorul unic.

Din această observație importantă:

atunci când utilizați câteva unități ascunse pe aceeași pagină, fiecare comutator trebuie să aibă un identificator unic, care va fi diferit de ID-uri din alte blocuri.

Astfel, în cuvintele trebuie să ne dăm seama ce, unde și de ce acum, să vedem pe HTML-cadru toate konnstruktsii:

Apoi, du-te direct la formarea unei foi de stil CSS, fără de care întreaga structură nu va funcționa. Codul minim fără nici o înregistrare, doar un pic de fond pentru blocul alocat drop pentru a determina pentru tine și pentru a arăta sfera de aplicare a acestui text. Puteți face, de asemenea, blocuri după cum doriți, atarna margini, colțuri rotunjite, selectați text sau gradient de fundal de umplere.

Folosind casetele de selectare ascunse, puteți implementa cu ușurință o filă-file. modal fereastră. blocuri într-un stil acordeon. cursoare, galerii și multe altele.

Aș fi recunoscător, dacă distribuiți o legătură într-o înregistrare în rețelele lor sociale:

pune special toate cu un exemplu - unitatea nu afișează corect, pur și simplu nu au o casetă de selectare, ca și în cazul în care restul nu se aplică:

Cu acest cod și prizonierul din [prime] [/ prime] unitate este OK, dar nu apăsat.

Citat: „a pus special toate cu un exemplu. “. Totul, dar nu toate))

Fii atent, ai face acest lucru. hidek: + verificat eticheta și așa. hidek: verificat + etichetă + div găsi, cum se spune, diferențele cu originalul.

N-am găsit? Prompt: numele selectorului .hide. și nu .hidek. Corectă și totul este TIPTOP.

Vă mulțumesc foarte mult pentru eficiența, cum se spune un elefant, nu am observat.