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

[Zlodar]

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

Не получается реализовать так что бы при открытии к примеру текст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.display=='none'&&document.getElementById(id).style.display=='none')||(document.getElementById(id).style.display=='block'&&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.display=='none'&&document.getElementById(id).style.display=='none')||(document.getElementById(id).style.display=='block'&&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.display=='none'&&document.getElementById(id).style.display=='none')||(document.getElementById(id).style.display=='block'&&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.display=='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.display=='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.display=='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.display=='block'&&document.getElementById(id).style.display=='block'){document.getElementById('newsbar').style.display='none';return 0}//если newsbar это getElementById(id) и равен block
if(document.getElementById('newsbar2').style.display=='block'&&document.getElementById(id).style.display=='block'){document.getElementById('newsbar2').style.display='none';return 0}//присваиваем значение none для скрытия после
if(document.getElementById('newsbar3').style.display=='block'&&document.getElementById(id).style.display=='block'){document.getElementById('newsbar3').style.display='none';return 0}//повторного нажатия и останавливаем функцию
//и так со всеми
	     }

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