Не так давно я публиковал статью о том, как сделать выпадающий список - спойлер в сайдбаре или иной части WordPress сайта. На этот раз, речь пойдет о выпадающем контенте любого характера при клике на определенную ссылку. Контент может быть любого рода: текст, изображение, видео или какой-то нужный скрипт. Реализация данного метода довольно проста, его работоспособность вы можете наблюдать в этой статье.
Для начала необходимо установить небольшой скрипт в header.php вашего сайта. Переходим в админ-панель сайта, жмем на вкладку "Внешний вид" - "Редактор", ищем header.php и в самый конец файла прописываем следующий код:
НАЖМИ ДЛЯ ПРОСМОТРА
<script>
function collapsElement(id) {
if ( document.getElementById(id).style.display != "none" ) {
document.getElementById(id).style.display = 'none';
}
else {
document.getElementById(id).style.display = '';
}
}
</script> |
<script>
function collapsElement(id) {
if ( document.getElementById(id).style.display != "none" ) {
document.getElementById(id).style.display = 'none';
}
else {
document.getElementById(id).style.display = '';
}
}
</script>
Полдела сделано, теперь остается на вставить вторую часть кода на той странице, где вы желаете разместить выпадающий текст или изображение. Необходимо переключиться в режим html и вставить в нужное место нижеприведенный код:
НАЖМИ ДЛЯ ПРОСМОТРА
<div><a href="javascript:collapsElement('identifikator')" title="" rel="nofollow">Анкор ссылки</a>
<div id="identifikator" style="display: none">
<p>Текст, изображение, видео и многое другое</p>
</div>
</div> |
<div><a href="javascript:collapsElement('identifikator')" title="" rel="nofollow">Анкор ссылки</a>
<div id="identifikator" style="display: none">
<p>Текст, изображение, видео и многое другое</p>
</div>
</div>
Если у вас появится необходимость размещения нескольких раскрывающихся ссылок с различным содержимым на одной странице, измените имя параметра identifikator, например на identifikator1, чтобы ваш код выглядел так:
НАЖМИ ДЛЯ ПРОСМОТРА
<div><a href="javascript:collapsElement('identifikator1')" title="" rel="nofollow">Анкор ссылки</a>
<div id="identifikator1" style="display: none">
<p>Текст, изображение, видео и многое другое</p>
</div>
</div> |
<div><a href="javascript:collapsElement('identifikator1')" title="" rel="nofollow">Анкор ссылки</a>
<div id="identifikator1" style="display: none">
<p>Текст, изображение, видео и многое другое</p>
</div>
</div>
В том случае, если вам необходимо, чтобы открытие нового спойлера приводило в закрытию предыдущего, в header.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> |
<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>
Если после прочтения статьи у вас остались какие-то вопросы или пожелания - оставляйте их в комментариях!
23 июня, 2014 
admin 
Опубликовано в рубрике 
Метки:
Здравствуйте! Все доступно написано спасибо. скажите а как вставить таблицу в раскрывающийся текст? Хотела сделать расписание уроков . наприме: 1 курс — группа 123- и таблица с уроками. какой будет скрипт подскажите
Здравствуйте, лучше всего, в вашем случае, на мой взгляд, подойдет плагин TablePress. Чтобы научиться им пользоваться, можете прочесть статью о плагине WP-Table Reloaded — предыдущей версии TablePress, принцип управления у них примерно одинаков.
А для чего указывать rel=»nofollow», если индексация таких статей, если они уникальны, очень важна для SEO?
Подскажите, как можно дать ссылку на один из блоков — чтобы он при переходе на эту ссылку еще и раскрылся?
хочу помощью таких ссылок сделать FAQ на сайте
но нужна возможность давать ссылку именно на нужный пункт
Здравствуйте!
То есть один раз вставляешь в header или footer скрипт с функцией и после этого получаешь возможность сколько угодно раз и абсолютно на любой странице выводить выпадающий контент меняя id=»identifikator»?
Скажите пожалуйста, а при подргузке контента, через ajax (jQuery) данный вариант работать будет? Спасибо!
Добрый день!
Спасибо за скрипт!
Есть вопрос, может подскажите, как добавить якорь в скрипт, т.е. при нажатии на ссылку открытый контент появлялся вверху страницы?
p/s Точнее… страница прокручивалась к самому контенту!
Братан, подскажи пожалуйста, что в скрипт добавить чтобы закрывалось выпадающее окно при клике в любом месте страницы еще?
Оо,то что искал! Спасибо!!
Добрый день!
Спасибо за решение, очень полезно.
Но в процессе использования столкнулся с тем что если при редактировании страницы переключиться с html на визуальный режим, предлагаемый вами скрипт ломается и его надо заново вставлять. Есть какое-то решение этой проблемы?
Спасибо.
Подскажите пж а как сделать что бы картинка не скакала, выпадающая, а открывалась в 1 месте? и что бы первый блок стоял уже открытым.
Добрый день. А как сделать чтобы, первый блок стоял уже открытым?