Разширяващите блокове скрито съдържание чрез CSS3

Нека се опитаме да направим без излишната вода, погледнете всичко това прост механизъм на действие, на показания пример съдържа същия флакон и да редактирате всичко, ако искате да:

В ролята на ключа отваря блок с допълнителна информация се използва не изолирана и не се вижда от текста, с недвусмисленото предложение да кликнете върху него, ти си без страх или съмнение, се уверете, че да се види скрития текст)))

• Checkbox (с отметка) - маркер отметка атрибут със стойност на типа и с конкретна комуникация идентификатор
• Заглавие (текст превключвател) - маркер със стойността на единния идентификационен код за за атрибут. (ID трябва да бъде същата като вход маркера с идентификатор отметка тип атрибут стойност).
• Блокиране със съдържание - таг DIV. който ще се поддържа до по-добри времена, докато потребителят кликне, различни скрито съдържание (текст, изображения и т.н., и т.н.)

Надявам се, че от моя хаотичен обяснение, но беше ясно каква е цялата работа. CSS използва нови стилове (с помощта на псевдо-проверен), за да покаже на блока съдържание, което до този момент е бил скрит, само когато потребителят кликне върху елемент, който е свързан с квадратче (отметка) на този идентификатор.

От това следва, важно наблюдение:

когато използвате няколко скрити елементи на една и съща страница, всеки ключ трябва да има уникален идентификатор, който ще бъде различен от номерата в други блокове.

По този начин, по думите ние трябва да разберем какво, къде и защо сега, нека да погледнем на HTML кадър всички konnstruktsii:

След това отидете директно към формирането на CSS стилове, без които цялата структура няма да работи. Минималната кода без никаква регистрация, само малко на фона на падащата разпределени блок да се определи за вас и да се покаже на обхвата на този текст. Можете също така да се блокове, колкото искате, виси ръбове, заоблени ъгли, изберете текст или за запълване на фона на градиента.

Използвайки скрити отметки, можете лесно да приложат разделен с табулатори. прозорец модален. блокове в стил акордеон. плъзгачи, галерии и др.

Ще Ви бъда благодарен, ако споделите връзка към запис в своите социални мрежи:

Специално сложи всичко това с един пример - на устройството не се показва правилно, просто не разполагате с отметка, сякаш останалите не се прилага:

С този код и затворникът в [RAW] [/ суровина] единица е ОК, но не е натиснат.

Цитат: "Специално сложи всичко това с един пример. ". Всичко, но не и всички))

Бъдете внимателни, вие правите това. hidek: проверява етикет + и така. hidek: проверява + етикет + Разделение намерите, както се казва, разликите с оригинала.

Не успяхме да намерим? Prompt: име селектор .hide. и не .hidek. Правилно и всичко е тип-топ.

Благодаря ви много за вашата ефективност, както се казва слон, не забелязах.