Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Открывающийся контент по клику

Здравствуйте уважаемые друзья, в одной из статей на abrek-ad-abra.ru рассказывалось о том, как сделать на своём блоге спойлер, специальный блок с каким либо контентом открывающимся при клике. Сегодня я хочу поделиться с вами ещё одним похожим вариантом но на этот раз контент у нас с вами будет раскрываться по клику по ссылке или же кнопке.

Как и в прошлом варианте содержание контента раскрывающегося по клику у нас может быть абсолютно любым, начиная от текста, изображений, видеороликов и заканчивая какими либо исполняющими скриптами.

Вот небольшой пример работы данного способа:


Пример!

Именно он, как вы уже наверное заметили и был применён на «Progress-project» для раскрытия преобразователя перед формой комментариев. Но сразу хочу вас предупредить о том, что данный способ применяется только непосредственно в файлах темы и в редакторе WordPress он работать не будет. Я же вывел пример в статье лишь для того, чтобы вам было понятно о чём именно идёт речь. Если вам нужно организовать раскрывающийся контент по клику именно в теле поста то лучше всего всё же установить спойлер.

Реализация открывающегося контента по клику

Чтобы сделать на своём блоге похожий вариант открывающегося контента по клику нам необходимо первым делом установить специальный скрипт который в дальнейшем и будет нести ответственность за появление контента при клике.

Все скрипты я рекомендую устанавливать в файл темы под названием footer.php до тега: </body> дабы сократить время загрузки основного материала ресурса, но встречаются вебмастера утверждающие, что в их темах скрипты установленные в footer не как не хотят работать и им приходится устанавливать их в header.php до закрывающегося тега: </head>. Поэтому в какой именно из этих двух файлов вашей темы вставлять скрипт именно вам решайте сами исходя из её особенностей.

<script>
 function collapsElement(id) {
 if ( document.getElementById(id).style.display != "none" ) {
 document.getElementById(id).style.display = 'none';
 }
 else {
 document.getElementById(id).style.display = '';
 }
 }
 </script>

После того, как вы определились с выбором файла и вставили в него скрипт не забудьте сохранить внесённые изменения и на этом можно смело считать, что пол дела у нас с вами уже сделано.

Далее нам осталось установить небольшой код уже с самим контентом который вы планируете сделать раскрывающимся при клике.

Итак находим необходимый файл в зависимости от того где именно вы хотите вывести кнопку либо ссылку на раскрывающийся контент, определяем нужное место и вставляем код:

<div><a class="open-content" href="javascript:collapsElement('opencontent')" title="" rel="nofollow">Анкор ссылки</a>
<div id="opencontent" style="display: none">
<p>Ваш открывающийся материал</p>
</div>
</div>

Вставив вместо строки «Ваш открывающийся материал» свой необходимый контент и изменив «Анкор ссылки» на необходимое название будущей кнопки.

Теперь, чтобы из обычной ссылки у нас с вами получилась достаточно симпатичная кнопка к уже имеющимуся классу «open-content» в файл темы style.css прописываем стили кнопки:

a.open-content {
 background: #BE0000 none repeat scroll 0 0;
 border-radius: 4px;
 box-shadow: 0 0 2px rgba(0, 0, 0, 1);
 color: rgb(255, 255, 255) !important;
 display: block;
 font-weight: bold;
 margin: 0.5em 0.9em;
 padding: 0.2em;
 position: relative;
 text-align: center;
 text-shadow: 2px 2px 2px #000;
 width: 8em;
}
a.open-content:hover {
 background: #CCCCCC none repeat scroll 0 0;
 box-shadow: 0 0 2px rgba(0, 0, 0, 1);
 color: #BE0000 !important;
 font-weight: bold;
 text-shadow: 0 0 0 #fff;
}

Меняя её размер и цвет под дизайн своего блога, в данном случае у меня задан красный цвет кнопки.

При необходимости дальнейшего использования данного варианта раскрывающегося контента по клику либо при вставке в один файл одновременно сразу несколько кнопок с отличающимся друг от друга содержимым, используем этот же код изменив: «opencontent» например на: «opencontent2» в этом случае код будет выглядеть примерно так:

<div><a class="open-content" href="javascript:collapsElement('opencontent2')" title="" rel="nofollow">Анкор ссылки</a>
<div id="opencontent2" style="display: none">
<p>Ваш открывающийся материал</p>
</div>
</div>

Если вы хотите, чтобы при вставке на одной и той же странице сразу несколько кнопок при открытии каждой новой автоматически закрывалась предыдущая, скрипт который мы с вами вставляли в самом начале в «header.php» либо «footer.php» необходимо поменять на следующий:

<script>
 var lastOpen;
 function collapsElement(id) {
 if ( document.getElementById(id).style.display != "none" ) {
 document.getElementById(id).style.display = 'none';
 }
 else {
 if(lastOpen !== undefined) {
 lastOpen.style.display = 'none';
 }
 lastOpen = document.getElementById(id);
 document.getElementById(id).style.display = '';
 }
 }
 </script>

Если вы не рассчитываете использовать выпадающий текст html на своём блоге более одного раза или просто не хотите устанавливать скрипт в «header.php» либо «footer.php» то можно воспользоваться ещё более простым способом вывода открывающегося контента по клику соединив оба кода во единый блок:

<a class="open-content" rel="nofollow" title="" href="javascript:collapsElement('opencontent')">Анкор ссылки</a>
<div id="opencontent" style="display: none;">
<p>Ваш открывающийся материал</p>
</div>
</div>
<script type="text/javascript">
// <![CDATA[ 
function collapsElement(id) { if ( document.getElementById(id).style.display != "none" ) { document.getElementById(id).style.display = 'none'; } else { document.getElementById(id).style.display = ''; } }
// ]]>
</script>

Как и в предыдущем варианте прописываем в файл style.css приведённые выше стили и устанавливаем данный блок в нужный файл. О том, как выводить исполняемый скрипт непосредственно в записи блога читайте здесь.

На этом на сегодня у меня всё, подписывайтесь на обновления «Progress-project», делитесь своим мнением в комментариях по поводу данного способа открытия контента по клику.

Желаю всего доброго и до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2016-07-17

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly(4)
Николай(3)
Олег(3)
Иван(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог