Добавляем скрытый блок на сайте со ссылкой Развернуть/Свернуть

Допустим скрытый блок находится в диве:

<div id="k2ModuleBox127" class="k2ItemsBlock">
[Здесь находится скрытая информация]
<div>

Изначально он скрыт, т.е. имеет такое свойство:

#k2ModuleBox127 {
    display: none;
}

Добавляем JavaScript следующего содержания:

<a class="ref" href="javascript:void(0)" 
onclick="showHide('k2ModuleBox127')"><span align="left">
<div id="show-rss">Показать rss</div>
</span></a><script>function showHide(element_id) {
                //Если элемент с id-шником element_id существует
                if (document.getElementById(element_id)) { 
                    //Записываем ссылку на элемент в переменную obj
                    var obj = document.getElementById(element_id);	
                    //Если css-свойство display не block, то: 
                    if (obj.style.display != "block") { 
                        obj.style.display = "block"; //Показываем элемент
                            var name_input = document.getElementById('show-rss');
                            name_input.innerText="Скрыть rss";
                    }
                    else  { obj.style.display = "none"; //Скрываем элемент
                            var name_input = document.getElementById('show-rss');
                            name_input.innerText="Показать rss";
                          }
                }
                //Если элемент с id-шником element_id не найден, то выводим сообщение
               // else alert("Элемент с id: " + element_id + " не найден!"); 
            }  
</script>

Что он делает?

Он показывает ссылку Показать rss, при нажатии на которую свойство блока .k2ModuleBox127 изменяется на видимый: obj.style.display != "block"

А сама ссылка при этом заменяется на Скрыть rss.

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

Покажем на примере сайта hram-ua.com.

Например, нам нужно скрыть блок .div k2CategoriesListBlock (см. скриношт, блок выделен красным):

Для начала нам нужно добавить убедится, что такой блок один единственный в теле страницы, для этого нажимаем cntrl+F и ищем имя класса: k2CategoriesListBlock.

Убеждаемся, что он один:

Теперь вставляем наш css и скрипт, с учетом правок:

#k2CategoriesListBlock {
    display: none;
}

Добавляем JavaScript следующего содержания:

<a class="ref" href="javascript:void(0)"
onclick="showHide('k2CategoriesListBlock')">
<span align="left"><div id="show-rss">Показать rss</div></span></a>
<script>            function showHide(element_id) {
                //Если элемент с id-шником element_id существует
                if (document.getElementById(element_id)) { 
                    //Записываем ссылку на элемент в переменную obj
                    var obj = document.getElementById(element_id);
                    //Если css-свойство display не block, то: 
                    if (obj.style.display != "block") { 
                        obj.style.display = "block"; //Показываем элемент
                            var name_input = document.getElementById('show-rss');
                            name_input.innerText="Скрыть rss";
                    }
                    else  { obj.style.display = "none"; //Скрываем элемент
                            var name_input = document.getElementById('show-rss');
                            name_input.innerText="Показать rss";
                          }
                }
                //Если элемент с id-шником element_id не найден, то выводим сообщение
               // else alert("Элемент с id: " + element_id + " не найден!"); 
            }  
</script>

В общем, видим, что все, что нам пришло, это заменит в скрипте k2ModuleBox127 на k2CategoriesListBlock и убедиться, что такой блок один в коде (что кстати и должно быть в правильной верстке: id должен однозначно идентифицировать блок в отличие от class).

Для внедрения на сайт, создаем файл http://hram-ua.com/js_show_hide_links.php

Для проверки можем внедрить в него строки:

<div id="k2CategoriesListBlock" class="k2ItemsBlock">
[Здесь находится скрытая информация]
</div>

Теперь находим главную страницу сайта в движке джумла:

И вставляем строку:

<?php echo file_get_contents("http://hram-ua.com/js_show_hide_links.php");?>

Теперь чистим кэш: