Самый короткий код спойлера для сайта. Без JS — только CSS Делайте с умом, делайте правильно...

📝 Пост №   215  от 2 сентября 2025   |   В категории WEB мастеру, Статьи   |   Комментариев нет

Не для кого не секрет, что красиво оформленная страничка блога с контентом не только имеет функциональное назначение, но и еще эстетически должна выглядеть привлекательно. А, когда у вас текст занимает довольно-таки большой объем — спойлер играет в отображении важных сносок в тексте не последнюю роль.

Многие админы подчас используют JS варианты, что не совсем хорошо — валидаторы часто «ругаются» на этот код… в особенности в последнее время. Давайте исправим этот недочет и воспользуемся самым простым, без кучи символов кода и вполне приемлемым вариантом, который, надеюсь, вам пригодится.

Преимущество этого варианта в том, что текстовую ссылку на открытие можете прописывать прямо в тексте, без переноса на новую строку. Это выглядит стильно и не «ломает страницу». Приведу здесь рабочий пример такого спойлера, дабы не растягивать повествование.

Кликните по этой ссылке

. А ниже — код, который вы сможете скопировать и пользоваться. Фон страницы с контентом спойлера можете менять по своему усмотрению. Так же ID спойлела тоже можете изменить, в зависимости от ваших потребностей. К примеру: Если на странице необходимо вставить 2 и более спойлеров — меняйте ID на другой. В коде 2 места, где это нужно сделать (смотрите s1).

Вот все!
Если вам понравилось — поделитесь в своих соц. сетях и подпишитесь на мой блог. Мне будет приятно, а вы сможете получать уведомления о выходе новых публикаций…

Оценок: (1 среднее: 5,00 из 5)

Загрузка...

Просмотров страницы: 21 Метки: CSS ○ Web мастеру ○ Новости блога ○ спойлер ○ Последнее обновление статьи: 01.09.2025 Короткая ссылка: https://master-sv.com/blog/?p=12957