[web_smile]

Здравствуйте гуру скриптописания =)
У меня есть одна проблем которую я не могу решить. Для вас она конечно пустяковая.
Нарыл в интернете всяческие jquery плагины и вот мне понравилась идея реализации отоброжения содержимого по средствам вертикальных табов.
Но по скольку изменять пока что получается лишь малую часть решил обратится к вам.
В общем что я хочу сделать: допустим есть табличка из 2 столбцов. В левом менюшка, в правом содержимое. Хотелось бы сделать так что бы при нажатии на один из пунктов в меню не нужно было идти на аналогичную страницу с другим содержимым а что бы содержимое 2 столбца просто заменялось.
Ранее делал подобнее с помощью выборки из базы данных, но не особо силен в пхп, и таким образом получается делать в левом столбце простое текстовое меню, но хочется же что б было красяво =)

Есть примерное понятие как это сделать... допустим в меню 5 кнопок, делается 5 дивов со скрытым содержимым, и к кнопкам привязывется onClick="Show('div'), но есть проблема. При открытии страницы должен быть отоброжен первый див, то в таком случае у меня получается что он открыт постоянно, как сделать так что бы при открытии нового дива старые сворачивались?

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

Добавлено через 1 минуту

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

Добавлено через 1 час 7 минут

Почти получилось реализовать:

<script>
var toggle = function() {

    var currentDiv = null;

    function open(divElement) {
        // Тут можно добавить эффект "плавного" открытия:
        divElement.style.display = "block";
        currentDiv = divElement;
    }

    function close(divElement) {
        divElement.style.display = "none";
        currentDiv = null;
    }

    return function(divID) {
var divElement = document.getElementById(divID);
if (divElement) {
    if (divElement === currentDiv) {
        close(currentDiv);
    } else if(currentDiv != null) {
        close(currentDiv);
        open(divElement);
    } else open(divElement);
}
    }
  }();
</script>

<table width="850" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">
    <a href="javascript://" onClick="toggle('div1');return false;">Блок 1</a>
    <br>
<a href="javascript://" onClick="toggle('div2');return false;">Блок 2</a>
</td>
    <td><div id="div1" style="display:none;">Блок 1</div>
<br />


<div id="div2" style="display:none;">Блок 2</div></td>
  </tr>
</table>

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

Еще знаю есть как то возможность сделать плавное открытие раскрытие, как то можно воплотить?

[vladendark]

$('.element').click(function(){
$('.curent-tab').toggleClass('active')
})

то есть. вы изначально скрываете все блоки с содержимым либо css (display:none) либо скриптом (.hide). А кода кликаете по-табу, то соответствующий блок получает класс active, который имеет display:block. У остальных блоков этот класс убираете

[web_smile]

Сообщение от vladendark

$('.element').click(function(){
$('.curent-tab').toggleClass('active')
})

то есть. вы изначально скрываете все блоки с содержимым либо css (display:none) либо скриптом (.hide). А кода кликаете по-табу, то соответствующий блок получает класс active, который имеет display:block. У остальных блоков этот класс убираете

Ничего не понял =(
Есть скажем 2 блока с разным содержимым, назовем их блок1 и блок2
Есть 2 кнопки: кнопка1 и кнопка2
Что нужно сделать:
Что бы при открытии страницы отображалось содержимое блок1
Но при нажатии на кнопка2, содержимое блок1 заменялось на содержимое блок2
И так же при обратном нажатии на кнопка1, содержимое блок2 заменяется на содержимое блок1

Все это получилось реализовать, кроме того что бы содержимое блок1 отоброжалось при открытии страницы. Если Блоку1 присвоить значние дисплей:шоу, то при нажатии на кнопка2 Блок1 не пропадает =(

Добавлено через 50 минут

В общем у меня получилось правда как то не очень удобная реализация:

<script>
function Show(id)
{
    el = document.getElementById(id);
    if (el.style.display=="none")
        el.style.display="block";
    else
        el.style.display="block";
}
function Hide(id)
{
    el = document.getElementById(id);
    if (el.style.display=="block")
        el.style.display="none";
    else
        el.style.display="none";
}

</script>

<table width="850" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">
<button onClick="Show('1div'); Hide('2div'); Hide('3div');">Отобразить Блок1</button>
<br />
<button onClick="Show('2div'); Hide('1div'); Hide('3div');">Отобразить Блок2</button>
<br />
<button onClick="Show('3div'); Hide('1div'); Hide('2div');">Отобразить Блок3</button>
    </td>
    <td valign="top">
<div id="1div" style="display:show;">
Блок1<br />
Блок1<br />
Блок1<br />
Блок1<br />
Блок1<br />
</div>

<div id="2div" style="display:none;">
Блок2<br />
Блок2<br />
Блок2<br />
Блок2<br />
Блок2<br />
</div>

<div id="3div" style="display:none;">
Блок3<br />
Блок3<br />
Блок3<br />
Блок3<br />
Блок3<br />
</div>
    </td>
  </tr>
</table>

Может можно как то упростить?

[vladendark]

http://jsfiddle.net/rR5J4/ изучайте.
К своему стыду я не силен в native JS, поэтому заюзал jqery