Страница WordPress. Раскрывающиеся списки

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

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

И мне удалось создать подобную страницу у себя в блоге: Elite: Dangerous. Она посвящена моим переводам статей одноимённой игры, выхода которой я жду в марте 2014-го года.

Итак, пример вы увидели, пора приступить к созданию.

Прежде всего нужно найти две картинки — plus плюс и minus минус. Можно взять у меня с сайта, я не против, или воспользоваться гуглом.

Затем создаём в админке новую страницу. Собственно, этот метод будет работать и в обычных записях блога, да и просто на пустом шаблоне html-страницы.

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

<div><img src="http://dobrijzmej.ru/img/plus.gif"></div>

Уже симпатично. Теперь нужно сделать так, что-бы знак плюса менялся на минус. В этом нам поможет язык программирования JavaScript. Для этого перед блоком текста мы добавляем блок срипта, и вносим изменения в наш тэг рисунка, добавляя к нему событие onclick:

<script>function SetTree(n){
   n.src="http://dobrijzmej.ru/img/minus.gif";
}</script>
<div><img onclick="SetTree(this)" src="http://dobrijzmej.ru/img/plus.gif"></div>

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

Давайте теперь сделаем так, что-бы минус мог обратно возвращаться на плюс. Для этого в блоке скрипта нам необходимо создать проверку оператором if на то, какая-же картина в данный момент на рисунке ? плюс или минус ?

<script>function SetTree(n){
   if(n.src=="http://dobrijzmej.ru/img/plus.gif"){
      n.src="http://dobrijzmej.ru/img/minus.gif";
   } else {
      n.src="http://dobrijzmej.ru/img/plus.gif";
   }
}</script>
<div><img onclick="SetTree(this)" src="http://dobrijzmej.ru/img/plus.gif"></div>

Ну вот, теперь картинка меняется в два направления. Пришла пора добавить текст заголовка и тот текст, который мы будем показывать и скрывать.

<script>function SetTree(n){
   if(n.src=="http://dobrijzmej.ru/img/plus.gif"){
      n.src="http://dobrijzmej.ru/img/minus.gif";
   } else {
      n.src="http://dobrijzmej.ru/img/plus.gif";
   }
}</script>
<div><img onclick="SetTree(this)" src="http://dobrijzmej.ru/img/plus.gif">Текст заголовка
<div>Этот текст будет показываться и скрываться нажатием на кнопку</div>
</div>

Всё-бы хорошо, но текст никоим образом не реагирует на щелчки мышкой… Теперь нам необходимо применить стили, а конкретно, такой тег стиля, как display. Подробнее про него можно почитать на htmlbook.ru. Сейчас просто следует знать, что он позволяет показать или скрыть определённый блок html-разметки на странице. Итак, нужно создать класс стиля, например, tree_content_hide, и указать в нём значение тега display равному none. А затем закрепить этот стиль за вновь написанным текстом.

<script>function SetTree(n){
   if(n.src=="http://dobrijzmej.ru/img/plus.gif"){
      n.src="http://dobrijzmej.ru/img/minus.gif";
   } else {
      n.src="http://dobrijzmej.ru/img/plus.gif";
   }
}</script>
<style type="text/css">
   .tree_content_hide{
      display: none;
   }
</style>
<div><img onclick="SetTree(this)" src="http://dobrijzmej.ru/img/plus.gif">Текст заголовка
<div class="tree_content_hide">Этот текст будет показываться и скрываться нажатием на кнопку</div>
</div>

Итак, мы скрыли текст, но всё ещё не умеем его показывать. Здесь я должен нагрузить вас теоретической частью. Дело в том, что для каждого рисунка будет свой блок div, который необходимо показать или спрятать. И самое сложное сейчас — определить на всей странице именно тот блок, который нужен. Все блоки на странице связаны между собой системой Родитель-потомок, и наша схема в данный момент выглядит следующим образом:

Есть основной блок div, показанный жёлтым цветом. Он у нас родитель всего, что внутри него. А внутри него три объекта: рисунок, заголовок, и блок div, в котором содержится скрываемый текст. Когда пользователь щёлкает мышкой на рисунке, то этот рисунок и передаётся в функцию. Теперь нам необходимо взять его родителя (блок div, выделенный жёлтым цветом), и через него добраться к свойствам блока div, выделенного синим цветом.

Сложно? Запутались? Да уж, не так просто выразить русским языком исходный код скрипта. Ну ничего, сейчас я напишу то, что рассказывал перед этим одной строчкой:

n.parentNode.getElementsByClassName('tree_content_hide')[0];

Вот и всё. Берём рисунок, выясняем его родителя (parentNode), делаем поиск у этого родителя по классу tree_content_hide, и запоминаем первый попавшийся под руку элемент (у него как раз будет индекс 0). А что-бы удобнее было обращаться к этому блоку div в дальнейшем, то выделим для него отдельную переменную:

var t = n.parentNode.getElementsByClassName('tree_content_hide')[0];

Ну хорошо, нашли мы этот блок, а дальше что ? А дальше нужно его показать… или скрыть, смотря в каком состоянии находится рисунок — плюсик на нём сейчас или минусик. Но скрывать мы будем не просто так, а используя другой стиль, например, создадим ещё один класс с именем tree_content_visible, и присвоим ему значение тега display равному block. Это сразу покажет нам его на экране. Вот обновлённая таблица наших стилей:

<style type="text/css">
   .tree_content_hide{
      display: none;
   }
   .tree_content_visible{
      display: block;
   }
</style>

И нам осталось только заменить этот стиль у синего блока div по щелчку мышки:

<script>function SetTree(n){
   var t;
   if(n.src=="http://dobrijzmej.ru/img/plus.gif"){
      t = n.parentNode.getElementsByClassName('tree_content_hide')[0];
      n.src="http://dobrijzmej.ru/img/minus.gif";
      t.setAttribute("class", "tree_content_visible");
   } else {
      t = n.parentNode.getElementsByClassName('tree_content_visible')[0];
      n.src="http://dobrijzmej.ru/img/plus.gif";
      t.setAttribute("class", "tree_content_hide");
   }
}</script>
<style type="text/css">
   .tree_content_hide{
      display: none;
   }
   .tree_content_visible{
      display: block;
   }
</style>
<div><img onclick="SetTree(this)" src="http://dobrijzmej.ru/img/plus.gif">Текст заголовка
<div class="tree_content_hide">Этот текст будет показываться и скрываться нажатием на кнопку</div>
</div>

Вот и всё. Вы можете использовать этот код где угодно. Главное, чтобы сохранялась иерархия между тегами img / div / div. Если вы поместите рисунок в абзац, или в тэг span, то код перестанет работать, т.к. нарушится зависимость родитель-потомок. Зато в потомке (синий div) можете писать что вашей душе угодно, да и в блоке «Текст заголовка» тоже можете применять какую угодно разметку. Даже более того, можете присвоить рисунку с плюсиком или минусиком свой стиль, и таким образом регулировать его отображение. Но если вздумаете переносить его между блоками, обязательно учтите этот перенос в блоке срипта.

Ну, и конечно, я приведу тот пример, который мы только что создали:

Текст заголовка

Этот текст будет показываться и скрываться нажатием на кнопку

Текст второго заголовка, выделенный разметкой

Первый элемент списка
Второй элемент списка
Третий элемент списка

Надеюсь, я всё понятно изложил. Если появятся вопросы — милости прошу ко мне в комментарии (к сожалению, я вынужден их модерировать).