Собственный спойлер для сайта

[Admin]

Данная тема создана специально, чтобы не писать весь скрипт целиком в комментариях к теме Создаем свой собственный спойлер для сайта

От Алекс-а поступила просьба:

Цитата:А как сделать этот скрипт, чтобы заголовок нераскрытого спойлера содержал надпись, например, "Подробнее (показать)", а раскрытого "Подробнее (скрыть)"
Спасибо.

Предлагаем готовый скрипт:

Код:

<script type="text/javascript">
function open_close(id_spol,id_up_spol) {
var obj = "";
if (document.getElementById) obj = document.getElementById(id_spol).style;
else if (document.all) obj = document.all[id_spol];
else if (document.layers) obj = document.layers[id_spol];
else return 1;

if (obj.display == "") obj.display = "none";
else if (obj.display != "none") {
    obj.display = "none";
    id_up_spol.innerHTML="Подробнее (показать)";
}
else {
    obj.display = "block";
    id_up_spol.innerHTML="Подробнее (скрыть)";
}
}
</script>

Код вызова процедуры показа/скрытия содержимого под спойлером следует заменить с onClick="open_close('spoiler1')" на onClick="open_close('spoiler1',this)"

[7Lexus]

Спасибо верховному главнокомандующему за оперативный и качественный ответ!

Но меня ещё давно уже волнует организация вот такого типа древовидного спойлера - usd.alt.sudrf.ru/modules.php?name=sud
Копался в коде этой странички - но сам не силен в html...
Поэтому вот... обращаюсь к умудренным знаниями и опытом.

Буду благодарен, если просветите меня по данной теме.

[Admin]

Вот сделал что-то похожее как в приведенном Вами примере:

Код:

<script type="text/javascript">
function open_close(id_spol,id_up_spol) {
var obj = "";
if (document.getElementById) obj = document.getElementById(id_spol).style;
else if (document.all) obj = document.all[id_spol];
else if (document.layers) obj = document.layers[id_spol];
else return 1;

if (obj.display == "") obj.display = "none";
else if (obj.display != "none") {
    obj.display = "none";
    id_up_spol.innerHTML="<img src='image/plus.png'>";
}
else {
    obj.display = "block";
    id_up_spol.innerHTML="<img src='image/minus.png'>";
}
}
</script>


<span class="spoiler_style" onClick="open_close('spoiler1',this)">
<img src="image/plus.png">
</span>
Тут неизменяемый текст
<div id="spoiler1" style="display:none; background:#F7F7F7; margin:0px 0px 0px 20px;">
Здесь содержится все то, что должен скрывать спойлер.<br>
Под спойлером может содержаться не только текст, но и картинки.<br>
</div>

Главное не забывайте менять имена спойлеров (spoiler1 и т.д.) и в функциях вызова тоже!

А для получения древовидного спойлера достаточно вставить один спойлер внутрь содержимого другого:

Код:

<span class="spoiler_style" onClick="open_close('spoiler1',this)">
<img src="image/plus.png">
</span>
Тут неизменяемый текст
<div id="spoiler1" style="display:none; background:#F7F7F7; margin:0px 0px 0px 20px;">
Здесь содержится все то, что должен скрывать спойлер.<br>
Под спойлером может содержаться не только текст, но и картинки.<br><br>
    <span class="spoiler_style" onClick="open_close('spoiler2',this)">
     <img src="image/plus.png">
    </span>
    Тут уже другой неизменяемый текст
    <div id="spoiler2" style="display:none; background:#F7F7F7; margin:0px 0px 0px 20px;">
     Древовидный спойлер.<br>
    </div>
</div>

[7Lexus]

Огромное спасибо! Буду "сажать" деревья.

[7Lexus]

Почему у меня в хроме и опере не работает этот скрипт?
(подсовываю через 1С:Битрикс)

Код:

<div class="divspoiler"> <input type="button" value="Откройте, чтобы посмотреть" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Закройте, чтобы не мешало'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Откройте, чтобы посмотреть'; }" /> </div>
<div>
  <div class="spoiler" style="display: none; "> Здесь может быть написано много текста с картинками и ссылками </div>
</div>

[Admin]

С 1С:Битриксом не работал.

Ох, ну и заставили Вы меня помучатся.

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

[7Lexus]

Да, к сожалению Битрикс, штука изворотливая.
Если в редакторе тупо вставить скопированный код, выпрямленный в одну строку, то сразу работает.
Но стоит только хотя бы один раз что-то подправить в содержимом спойлера, как тут же все теги принимают свою расстановку и дальнейшее "выпрямление" ни к чему не приводит.
Извиняюсь, конечно, что вовлек Вас в мучения.
Просто меня привлекла простота кода именно в том варианте спойлера, когда заголовок меняется в зависимости от состояния (открыт/закрыт).

Если что-то будет новенькое, в эту тему прошу проинформировать. Спасибо большое!

[7Lexus]

Уважаемый верховный!
А вот ещё просьба такого рода.
Имеется вот такое древовидное меню - rghost.ru/40228663.
Код написан так, что раскрытие происходит только при нажатии на значок плюс.
Вопрос вот в чем - как сделать так, чтобы раскрывалось и при нажатии на содержимое рядом с плюсом?
Благодарю заранее.

[Admin]

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

Для того чтобы меню открывалось/закрывалось при клике по содержимому справа от значка плюс (или минус), необходимо в файле tree.js исправить строки:

Код:

// Write out join icons
if (hcn) {
    if (ls) {
        document.write("<a href=\"javascript: oc(" + nodeValues[0] + ", 1);\"><img id=\"join" + nodeValues[0] + "\" src=\"img/");
             if (ino) document.write("minus");
            else document.write("plus");
        document.write("bottom.gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
    } else {
        document.write("<a href=\"javascript: oc(" + nodeValues[0] + ", 0);\"><img id=\"join" + nodeValues[0] + "\" src=\"img/");
            if (ino) document.write("minus");
            else document.write("plus");
        document.write(".gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
    }

на такие

Код:

// Write out join icons
if (hcn) {
    if (ls) {
        document.write("<span onclick=\"javascript: oc(" + nodeValues[0] + ", 1);\"><img id=\"join" + nodeValues[0] + "\" src=\"img/");
             if (ino) document.write("minus");
            else document.write("plus");
        document.write("bottom.gif\" align=\"absbottom\" alt=\"Open/Close node\" />");
    } else {
        document.write("<span onclick=\"javascript: oc(" + nodeValues[0] + ", 0);\"><img id=\"join" + nodeValues[0] + "\" src=\"img/");
            if (ino) document.write("minus");
            else document.write("plus");
        document.write(".gif\" align=\"absbottom\" alt=\"Open/Close node\" />");
    }

И еще строчки:

Код:

// End link
document.write("</a><br />");

меняем на:

Код:

// End link
document.write("</a></span><br />");

Надеюсь я правильно понял поставленную задачу.

[7Lexus]

Спасибо за проделанную работу!
...а вот, кстати, до чего додумался я сам (чисто логически потому что в кодах не очень соображаю)

Код:

Tree[0] = "1|0|Администрация поселения|javascript: oc(1, 0);";
Tree[1] = "2|1|Общая информация|#";
Tree[2] = "3|1|Контакты|#";
Tree[3] = "4|1|Новости|#";
Tree[4] = "5|0|Официальные документы|javascript: oc(5, 0);";
Tree[5] = "6|5|Устав|#";
Tree[6] = "7|5|Нормативно-правовые акты|javascript: oc(7, 5);";
Tree[7] = "8|7|Постановления|#";
Tree[8] = "9|7|Решения|#";
Tree[9] = "10|5|Градостроительный план|#";
Tree[10] = "11|0|Совет депутатов|javascript: oc(11, 0);";
Tree[11] = "12|11|Состав|#";
Tree[12] = "13|11|Сессии|#";
Tree[13] = "14|11|Документы|#";
Tree[14] = "15|0|Фото|#";

Это в файле default.html

Просто решил подсмотреть через "Просмотр кода элемента" и увидел там этот кусок возле тех пунктов, где плюс.
Вроде работает.
А вам спасибо за помощь и подсказки. Сам нашел на вашем сайте много чего интересного для себя. Наверное, пора садится всё-таки за учебники по Java, Html и всему, что с этим связано.