Javascript-форум - Скрытие нескольких независимых элементов

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Скрытие нескольких независимых элементов (https://javascript.ru/forum/dom-window/6249-skrytie-neskolkikh-nezavisimykh-ehlementov.html)

Скрытие нескольких независимых элементов

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

Вот есть скрипт, в котором каждая из трех ссылок показывает/скрывает соответствующий текстовый блок:

Код:

   <script type="text/javascript">

      function foo(id) {

      if (document.getElementById(id).style.display == "none")

         {document.getElementById(id).style.display = "block"}

      else

         {document.getElementById(id).style.display = "none"}

      }

   </script>



   <style type="text/css">

      * {

      margin: 0;

      padding: 0;

      }

      body {

      color: #000;

      background: #fff;

      }

      a {

      color: #00f;

      cursor: pointer;

      }

      #controls {

      padding: 20px 50px;

      }

      #block1, #block2, #block3 {

      height: 50px;

      padding: 20px 50px;

      margin: 20px;

      border: 1px solid #ccc;

      }

   </style>

</head>

<body>

   <ul id="controls">

      <li><a onclick="foo('block1')">Скрыть/показать первый блок</a></li>

      <li><a onclick="foo('block2')">Скрыть/показать второй блок</a></li>

      <li><a onclick="foo('block3')">Скрыть/показать третий блок</a></li>

   </ul>



   <p id="block1">

      Первый блок.

   </p>

   <p id="block2">

      Второй блок.

   </p>

   <p id="block3">

      Третий блок.

   </p>

А как должен выглядеть код, чтобы первая ссылка скрывала/показывала, например, первый и третий блоки одновременно?

<li><a onclick="foo('block1');foo('block3')">Скрыть/показать первый, третий блок</a></li>

Получилось, большое спасибо!

Кстати, аналогичный вопрос по другому такому же скрипту. Только он скрывает и показывает элементы с эффектом плавного выезжания. Так вот, можно ли в нем сделать, чтобы при нажатии на одну ссылку одновременно выезжали/уезжали несколько блоков, расположенных в разных частях страницы?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="animatedcollapse.js"></script>
</head>

<body>
<p><b>Пример:</b></p>

<a href="javascript:collapse1.slideit()">Показать/Скрыть DIV 1</a>
<div id="cat1" style="width: 300px; background-color: #99E0FB;">
	<div style="padding: 0 5px">
	<h3>Содержимое внутри DIV!</h3>
	<h3>Содержимое внутри DIV!</h3>
	</div>
</div>

<a href="javascript:collapse2.slideit()">Показать/Скрыть DIV 2</a>
<div id="cat2" style="width: 300px; background-color: #99E0FB;">
	<div style="padding: 0 5px">
	<h3>Содержимое внутри DIV!</h3>
	<h3>Содержимое внутри DIV!</h3>
	</div>
</div>

<script type="text/javascript">var collapse1=new animatedcollapse("cat1", 800, true)</script>
<script type="text/javascript">var collapse2=new animatedcollapse("cat2", 800, true)</script>

</body>
</html>

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

Цитата:

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

как надо скрывать текст частями

Как вариант...

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
</style>
<script>
function Go() {
	var o=document.getElementById('txt').getElementsByTagName('span')
	var ok=false
	var i
	for (i=0; i<o.length; i++) {
		if (o[i].style.display!='none') {
			o[i].style.display='none'
			ok=true
			break
		}
	}
	if (ok) {
		return
	}
	for (i=0; i<o.length; i++) {
		o[i].style.display=''
	}
}
</script>
</HEAD>
<BODY>
<p id="txt">
	<span>первая часть</span>
	<span>вторая часть</span>
</p>
<input type='button'value='Go' onclick='Go()' />
</BODY>
</HTML>

Цитата:

Сообщение от ksa (Сообщение 82745)

Как вариант...

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
</style>
<script>
function Go() {
	var o=document.getElementById('txt').getElementsByTagName('span')
	var ok=false
	var i
	for (i=0; i<o.length; i++) {
		if (o[i].style.display!='none') {
			o[i].style.display='none'
			ok=true
			break
		}
	}
	if (ok) {
		return
	}
	for (i=0; i<o.length; i++) {
		o[i].style.display=''
	}
}
</script>
</HEAD>
<BODY>
<p id="txt">
	<span>первая часть</span>
	<span>вторая часть</span>
</p>
<input type='button'value='Go' onclick='Go()' />
</BODY>
</HTML>

Большое спасибо !!!) Но в силу моих пока что не очень больших знаниях JS, мне не много не понятен сам скрипт, ты можешь его мне описать для повышения так сказать уровня самообразования???
Заранее спасибо!!!)

прочитав эту книжку, ты поймешь, что делает этот скрипт

если же хочешь более адекватный ответ, веди себя адекватнее, задавай вопросы ;)

Цитата:

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

мне не много не понятен сам скрипт

Что именно в букварском скрипте может быть непонятно? :)