Простой спойлер на HTML и CSS

25.02.14 25.02.14 Нет 6235

Простой спойлер на чистом HTML и CSS. Логика работы неявна – но работает, хотя и есть нюансы.

Особенности:

Требует наличия подключенного файла css – причем сам файл при этом может быть пустым
Требует определения классов элементов (см. код) – при этом классы могут быть не определены
При нескольких спойлерах наименования классов элементов должны совпадать
Допускается вложенность, без ограничений – при этом должны соблюдаться моменты, описанные выше
Закрытие/открытие происходит по клику – при перезагрузке страницы, даже после очистки кэша, спойлер остается в последнем положении
Закрывающий/открывающий элемент может быть любой – картинка, кнопка (<button>Спойлер</button>), теги span, div. При этом button должно быть без class; при отсутствии class в div или span будет элемент в виде текста

Между <head></head>:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css">
<title>Простой спойлер на HTML и CSS</title>

Между <body></body>:

<h1>Простой спойлер на HTML и CSS</h1>

<div class="spoiler">
    <label>
        <input type="checkbox"/>
    <button>Первый спойлер - button</button>
        <div class="text">
        Первый спойлер: текст или другое содержимое
     </div> 
     </label>
 </div>

<div class="spoiler">
    <label>
        <input type="checkbox"/>
    <div class="btn">Второй спойлер - div</div>
        <div class="text">
        Второй спойлер: текст или другое содержимое
     </div> 
     </label>
 </div>

<div class="spoiler">
    <label>
        <input type="checkbox"/>
    <span class="btn">Третий спойлер - span</span>
        <div class="text">
        Третий спойлер: текст или другое содержимое
     </div> 
     </label>
 </div>

<div class="spoiler">
    <label>
        <input type="checkbox"/>
    <img src="spoiler.jpg" alt="Спойлер" title="Спойлер">
        <div class="text">
        Четвертый спойлер: текст или другое содержимое
     </div> 
     </label>
 </div>

Смотреть пример

Скачать исходник Размер: 4,70kB | Изменен: 25.02.14 | Загрузок: 210