Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Сворачивающиеся/разворачивающиеся блоки текста (https://javascript.ru/forum/dom-window/9196-svorachivayushhiesya-razvorachivayushhiesya-bloki-teksta.html)

kuraiame 04.05.2010 14:22

Сворачивающиеся/разворачивающиеся блоки текста
 
Всем доброго времени суток!
Столкнулся с такой задачей.
Имеем, сайт написанный на MODx. В нем разделы.
В разделах контент.
Нужно чтобы из разделов динамически (средствами php) выводился материал.
Материал должен быть разбит так:
Заголовок.
Блаблабла
Подробнее. (Вот при нажатии этой ссылки должен плавно открываться блок всей новости. При этом "Подробнее" НЕ скрывается.)

Заголовок2
Блаблабла2
Подробнее2. (тоже самое)

Причем необходимо чтобы при нажатии на следущую ссылку "Подробнее" предыдущая сворачивалась.
Надеюсь понятно изъяснился. Так вот, подскажите пожалуйста как это реализовать. Я имею ввиду именно эти блоки, остальное я сам. ^^

Skipp 04.05.2010 16:15

А что тут тебе подсказывать? Ты js, php, css знаешь?

Пиши с какой проблемой столкнулся. А не проси написать за тебя код.

kuraiame 05.05.2010 05:58

php css знаю, js достаточно посредственно. Но проблема уже решена, взял за основу какой-то пример, в обсчим всем спасибо. ;)

vah-smile 05.05.2010 13:36

Самий простой способ - это поиграть из свойством css - visibility (hidden - спрятать содержимое; visible - отобразить содержимое). Делаешь два варианта для visible и для hidden:

<script language='javascript' type="text/javascript">

function show (param)
{
    var show_id_1 = document.getElementById("show_1").style;
    var show_id_2 = document.getElementById("show_2").style;

    if (param=="show_1")
    {
        show_id_1.visibility = "hidden";
        show_id_2.visibility = "visible";

    }
    else
    {
        show_id_2.visibility = "hidden";
        show_id_1.visibility = "visible";
    }
}

</script>

<div id='show_1' onClick="show('show_1');">Содержание 1</div>
<div id='show_2' style="visibility: hidden;" onclick="show('show_2');">Содержание 2</div>


Код можно было бы сократить используя рекурсию, но я так написал для наглядности! Используя стили выравнивания для каждого из пунктов меню мы получим то, что хотели :thanks:


Часовой пояс GMT +3, время: 03:43.