Как сделать авто закрытие ShowOrHide?

[Zlodar]

Здравствуйте!:victory:

Не получается реализовать так что бы при открытии к примеру текст1 закрывался текст2 и текст3 если они открыты.

<a href="javascript:ShowOrHide('newsbar')">открыть1</a>
<a href="javascript:ShowOrHide('newsbar2')">открыть2</a>
<a href="javascript:ShowOrHide('newsbar3')">открыть3</a>


<div id="newsbar" style="display:none;">
текст1
</div>
<div id="newsbar2" style="display:none;">
текст2
</div>
<div id="newsbar3" style="display:none;">
текст3
</div>


Подскажите пожалуйста как быть.
За ранее спасибо.

[Caminante]

Добрый день! В вашем примере нет кода самой функции ShowOrHide...
Можно сделать так - ваши div´ы лежат внутри одного дива-контейнера с id="container". Тогда можно сделать примерно так:

function ShowOrHide(id)
{
var container = documentGetElementById('container');

var divs = container.getElementsBYTagName('div');

for(var i = 0; i<divs.length; i++)
{
var divId = divs[i].id;
if (divId == id)
document.getElementById(divId).style.display = 'block';
else
document.getElementById(divId).style.display = 'none';
}
}

[Zlodar]

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

Вот моя функция:
<script type="text/javascript" language="javascript">
function ShowOrHide(id) {
var block = document.getElementById(id).style;

if (block.display == 'none'){block.display = 'block';}

else

{block.display = 'none';}

}
</script>

[Caminante]

В принципе подход верный, только при этом у всех блоков будет меняться значение display на противоположное. А нужно, чтобы при этом у элемента, на который нажали, display было block, а у остальных - none.


function ShowOrHide(id)
{
// обозначаем контейнер
var container = documentGetElementById('container');

//собираем все div'ы внутри контейнера
var divs = container.getElementsBYTagName('div');

//проходимся циклом по всем div'ам
for(var i = 0; i<divs.length; i++)
{
var divId = divs[i].id;
if (divId == id)
// если id текущего div'а совпадает с id, переданным функции, делаем его видимым
document.getElementById(divId).style.display = 'block';
else
//остальные элементы делаем невидимыми
document.getElementById(divId).style.display = 'none';
}
}



Еще можно на jQuery сделать, будет выглядеть примерно:

$('div[id^=newsbar]').toggleClass('visible').toggleClass('invisible') ;

При этом надо задать классу visible значение display: none и наоборот.

[bes]

Caminante, а если на странице будет много div, причём многие из которых не должны скрываться??
В вашей реализации наверное лучше не получать все div-ы на странице, а создать массив необходимых id и брать id элементов для скрытия оттуда.

[Caminante]

bes, в моем примере берутся все div'ы внутри контейнера, и по условию должны закрываться все, кроме того, по которому щелкнул пользователь, как я понимаю. Мне кажется, что это решение при такой постановке задачи имеет право на жизнь. Но, конечно же, можно и брать id из массива, как вы предлагаете.

[Dim@]

Можно было сделать проще (это я про свой код), но я просто торопился:) function ShowOrHide(id) {
if((document.getElementById('newsbar').style.displ ay=='none'&&document.getElementById(id).style.display=='none') ||(document.getElementById(id).style.display=='blo ck'&&document.getElementById('newsbar').style.display== 'block')){
document.getElementById(id).style.display='block'
document.getElementById('newsbar2').style.display= 'none'
document.getElementById('newsbar3').style.display= 'none'
}
if((document.getElementById('newsbar2').style.disp lay=='none'&&document.getElementById(id).style.display=='none') ||(document.getElementById(id).style.display=='blo ck'&&document.getElementById('newsbar2').style.display= ='block')){
document.getElementById('newsbar').style.display=' none'
document.getElementById(id).style.display='block'
document.getElementById('newsbar3').style.display= 'none'
}
if((document.getElementById('newsbar3').style.disp lay=='none'&&document.getElementById(id).style.display=='none') ||(document.getElementById(id).style.display=='blo ck'&&document.getElementById('newsbar3').style.display= ='block')){
document.getElementById('newsbar').style.display=' none'
document.getElementById(id).style.display='block'
document.getElementById('newsbar2').style.display= 'none'
}
}

[bes]

в моем примере берутся все div'ы внутри контейнера
Да, здесь всё чётко, это я при беглом просмотре не заметил, что перед getElementsByTagName стоит container, а не document.

Судя по тому, что хочет автор, можно вообще убрать цикл и просто сохранять в некоторой переменной id отображающегося div-a - текущий элемент отображать, запомненный скрывать.

[Zlodar]

Спасибо большое за помощь, начинаю даже немножко соображать на эту тему, но вот если по ссылке открыть1 повторно нажать то блок не закрывается, я методом тыка поковырялся с пару часиков, но не чего у меня не вышло. Подскажите пожалуйста что за функция за это отвечает и куды её воткнуть.
Большое спасибо

[Dim@]

если вы хотите еще и закрытие div-а при повторном нажатии то примерно так (только посмотрите пожалуйста код иначе для кого пишу:-? )
function ShowOrHide(id) {
if(document.getElementById('newsbar').style.displa y=='none'&&document.getElementById(id).style.display=='none') {
document.getElementById(id).style.display='block'//если newbars является getElementById(id) и равен none то
document.getElementById('newsbar2').style.display= 'none'//присваиваем ему значение display равное block а
document.getElementById('newsbar3').style.display= 'none';return 0;//остальным none и останавливаем функцию
}//остановка функции нужна для того что-бы потом не делалась проверка является ли display равным block
//иначе текст будет появляться и многновенно исчезать =) всё просто
if(document.getElementById('newsbar2').style.displ ay=='none'&&document.getElementById(id).style.display=='none') {
document.getElementById('newsbar').style.display=' none'//если newbars2 является getElementById(id) и равен none
document.getElementById(id).style.display='block'//то присваиваем ему значение display равное block а
document.getElementById('newsbar3').style.display= 'none';return 0;//остальным none и останавливаем функцию
}
if(document.getElementById('newsbar3').style.displ ay=='none'&&document.getElementById(id).style.display=='none') {
document.getElementById('newsbar').style.display=' none'//если newbars3 является getElementById(id) и равен none
document.getElementById(id).style.display='block'//то присваиваем ему значение display равное block а
document.getElementById('newsbar2').style.display= 'none';//остальным none и останавливаем функцию
return 0;}
if(document.getElementById('newsbar').style.displa y=='block'&&document.getElementById(id).style.display=='block' ){document.getElementById('newsbar').style.display ='none';return 0}//если newsbar это getElementById(id) и равен block
if(document.getElementById('newsbar2').style.displ ay=='block'&&document.getElementById(id).style.display=='block' ){document.getElementById('newsbar2').style.displa y='none';return 0}//присваиваем значение none для скрытия после
if(document.getElementById('newsbar3').style.displ ay=='block'&&document.getElementById(id).style.display=='block' ){document.getElementById('newsbar3').style.displa y='none';return 0}//повторного нажатия и останавливаем функцию
//и так со всеми
}

посмотрите и оцените :)

[Zlodar]

не получилось когда кликаешь переходит на javascript:ShowOrHide('newsbar')

Тобишь в окне браузера заместо ссылки javascript:ShowOrHide('newsbar')

[Zlodar]

Ну щас хоть понятно что происходит. Ещё нужно литературу почитать на эту тему.

[Dim@]

попробуйте написать теги а примерно таким образом <a href='javascript: void 0' onClick=ShowOrHide('newsbar')>текст1</a> я думаю должно сработать

[Caminante]

Zlodar, если захотите воспользоваться моим кодом, то для того, чтобы открытый выбранный элемент закрывался, нужно видоизменить одну строчку:


function ShowOrHide(id)
{
// обозначаем контейнер
var container = documentGetElementById('container');

//собираем все div'ы внутри контейнера
var divs = container.getElementsBYTagName('div');

//проходимся циклом по всем div'ам
for(var i = 0; i<divs.length; i++)
{
var divId = divs[i].id;
if (divId == id)
// если id текущего div'а совпадает с id, переданным функции, делаем его видимым или невидимым, если он уже открыт
document.getElementById(divId).style.display = (document.getElementById(divId).style.display == 'none') ? 'block' : 'none';
else
//остальные элементы делаем невидимыми
document.getElementById(divId).style.display = 'none';
}
}

[shohxusrav]

Можно было сделать проще (это я про свой код), но я просто торопился:) function ShowOrHide(id) {
if((document.getElementById('newsbar').style.displ ay=='none'&&document.getElementById(id).style.display=='none') ||(document.getElementById(id).style.display=='blo ck'&&document.getElementById('newsbar').style.display== 'block')){
document.getElementById(id).style.display='block'
document.getElementById('newsbar2').style.display= 'none'
document.getElementById('newsbar3').style.display= 'none'
}
if((document.getElementById('newsbar2').style.disp lay=='none'&&document.getElementById(id).style.display=='none') ||(document.getElementById(id).style.display=='blo ck'&&document.getElementById('newsbar2').style.display= ='block')){
document.getElementById('newsbar').style.display=' none'
document.getElementById(id).style.display='block'
document.getElementById('newsbar3').style.display= 'none'
}
if((document.getElementById('newsbar3').style.disp lay=='none'&&document.getElementById(id).style.display=='none') ||(document.getElementById(id).style.display=='blo ck'&&document.getElementById('newsbar3').style.display= ='block')){
document.getElementById('newsbar').style.display=' none'
document.getElementById(id).style.display='block'
document.getElementById('newsbar2').style.display= 'none'
}
}
Привет Дима!
У меня есть проблема! Пожалуйста помоги!

================================================== =====
<script type="text/javascript" language="javascript">
function ShowOrHide(id) {
if((document.getElementById('newsbar').style.displ ay=='none'&&document.getElementById(id).style.display=='none') ||(document.getElementById(id).style.display=='blo ck'&&document.getElementById('newsbar').style.display== 'block')){
document.getElementById(id).style.display='block'
document.getElementById('newsbar2').style.display= 'none'
document.getElementById('newsbar3').style.display= 'none'
}
if((document.getElementById('newsbar2').style.disp lay=='none'&&document.getElementById(id).style.display=='none') ||(document.getElementById(id).style.display=='blo ck'&&document.getElementById('newsbar2').style.display= ='block')){
document.getElementById('newsbar').style.display=' none'
document.getElementById(id).style.display='block'
document.getElementById('newsbar3').style.display= 'none'
}
if((document.getElementById('newsbar3').style.disp lay=='none'&&document.getElementById(id).style.display=='none') ||(document.getElementById(id).style.display=='blo ck'&&document.getElementById('newsbar3').style.display= ='block')){
document.getElementById('newsbar').style.display=' none'
document.getElementById(id).style.display='block'
document.getElementById('newsbar2').style.display= 'none'
}
}
</script>

<a href="javascript:ShowOrHide('newsbar')">открыть1</a>
<a href="javascript:ShowOrHide('newsbar2')">открыть2</a>
<a href="javascript:ShowOrHide('newsbar3')">открыть3</a>


<div id="newsbar" style="display:none;">
текст1
</div>
<div id="newsbar2" style="display:none;">
текст2
</div>
<div id="newsbar3" style="display:none;">
текст3
</div>
================================================== =====

Тепер ты должен мне кое в чем помочь. Ты ведь хорошо разбераешься в Javascript.

Когда кликаешь на (открыть1, открыть2, открыть3) тексты подними должны открываться медленно и еффективно а не сразу.

Зарание благодарю за помощь!

[Dim@]

shohxusrav,
это работа css, помочь помогу конечно, ток тот код не используй, он очень громоздкий и мягко говоря плохой, я его писал когда только знакомился с JS, щас напишу;)

[shohxusrav]

shohxusrav,
это работа css, помочь помогу конечно, ток тот код не используй, он очень громоздкий и мягко говоря плохой, я его писал когда только знакомился с JS, щас напишу;)
Спасибо, и жду!