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

Дата публикации  Дата изменения25.02.14  КомментарииНет   Просмотры2236

Простой спойлер на чистом 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 | Загрузок: 78
Бесплатные курсы

Категории

Теги: , , , ,

Оцените материал:

Рейтинг: 0.0/10 (0)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые