Спойлер для текста на JavaScript и CSS
 | |
| При помощи строк javascript, можно легко скрывать тексты или целые блоки, в которых находится содержимое, где при клике производится раскрытие. Вероятно, что многие согласятся со мной, это когда изначально выстраиваем заданным блок по высоте, где впоследствии его скрываем под спойлером. Также в нем может находится описание и ключевое слово, которое находится под ссылкой на переход. Но главное, где можно задействовать в описание, что все корректно смотрится, так как для открытия мы делаем из статьи ключевые значение, что автоматически они меняют оттенок цвета. В большинстве можно встретить многочисленные материалы, для скрытия элементов, где все организовывается при помощи jQuery или на чистом CSS, где каждой версий есть свои плюсы и минусы в преимуществе. В статье предоставлен небольшой javascript, при помощи которого, веб разработчика появляется функция для скрытия почти абсолютно любую информации, что может нести совершенный второстепенный характер. Так выглядит при проверке на demo странице:  Установочный процесс: HTML Код <div class="skryty-tekst-spoyler"> <p>Около десяти лет назад SEO не было чем-то обыденным для <span class="skryvatsya" onclick="view('t1'); return false">скрытыя блока с описанием</span>, или даже чем-то, что считалось необходимостью для бизнеса.</p> <span id="t1" class="skrytogo-teksta"> Хотя это является частью этого, это не единственное, что влечет за собой веб-дизайн. </span> <p>Люди обычно считают, что веб-дизайн - это создание веб-сайта, который выглядит стильно и <span class="skryvatsya" onclick="view('t2'); return false">эстетично по своему оформлению.</span>.</p> <span id="t2" class="skrytogo-teksta"> Для тех из вас, кому неясно, что мы подразумеваем под метриками или KPI, мы говорим о стандартах успеха SEO. </span> <p>Является ли это рекламным или информативным, цель любого электронного письма состоит в том, чтобы достичь почтового ящика целевой аудитории.</p> </div> CSS Код .skryty-tekst-spoyler { max-width: 910px; padding: 9px; margin: 0 auto; } /* скрытый блок */ .skrytogo-teksta { display: none; margin: 4px 0px; padding: 8px; width: 98%; border: 1px solid #4183d2; background: #ddeeff; border-radius: 3px; } /* текст */ .skryvatsya { color: #f36119; cursor: help; } .skryvatsya:hover { color: #3a74ce; cursor: help; } JS Код function view(n) { style = document.getElementById(n).style; style.display = (style.display == 'block') ? 'none' : 'block'; } Здесь все заключается в том, что в описание мы ставим под значение слово, но при открытии его будет полное обозначение его. И для чего оно нужно, так как если все написано по тематике, то отлично впишется такая функция. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |