Показать сообщение отдельно
  #3 (permalink)  
Старый 30.06.2013, 17:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Exrector,
на всякий случай id уникально, если элементов много тогда класс.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#gallery{position:relative;font:18px Times New Roman,arial,sans-serif;line-height:20px;width:350px;padding:0px 0 0 0px;background:url(pointer.jpg) no-repeat left top}
#gallery h3{color:#F00;font:18px}
#gallery h3.color{color:#000;margin:12px 25px}
#gallery .switch{display:block;cursor:pointer;color:#00f;font-weight:normal}
#gallery .switch .turn_off,#gallery .off .turn_on,#gallery .hide{display:none}
#gallery .off{color:#c00}
#gallery .off .turn_off{display:inline}
#gallery .show{position:absolute;top:0;left:450px;display:block;width:500px;background:attachment);z-index:300}
#gallery form{width:300px;height:300px;background:url(form.jpg);padding:50px}
#gallery form fieldset{background:#fff}
#gallery .table{background:url(left.gif) no-repeat left bottom;padding:0 25px 25px;width:320px}
#gallery table,#gallery caption,#gallery table tr,#gallery table tr td{border:1px solid #000;padding:5px;background:#fff}
#gallery a,#gallery a:visited{color:#00c;line-height:30px}
#gallery textarea{width:350px;border:#0cc;color:#048;padding:10px}
#gallery dl{width:370px}
</style>
  <script type="text/javascript">
  window.onload = function () {
    for (var c = document.querySelectorAll(".switch"), a, b = 0; b < c.length; b++)
      c[b].onclick = function () {
        a && (a.style.color='',a.nextElementSibling.className = "hide", a.children[0].className = "", a.children[1].className = "hide");
          this.nextElementSibling.className = a != this?
          (a = this,a.style.color='red', a.children[0].className = "hide", a.children[1].className = "", "show"):
          (a = null, "hide")
      }
  };

  </script>
</head>
<body>
<!-- =================================начало блока=========================================================== -->
I РАЗДЕЛ Продукция подлежащая обязательному<BR>подтверждению соответствия
<!-- ==================название блока 1===================================================== -->
<div id="gallery"><!-- ========================начало окна 1========================================================== -->
<div><b class="switch"><span class="turn_on">+</span><span class="turn_off">-</span>1 Вода питьевая, расфасованная в емкости</b>
<div class="hide">
<h3>определяемый компонент</h3>
Алюминий(Al)<br>
Аммиак и аммоний ион<br>
Барий (Ba)<br>
Бериллий (Be)<br>
Бикарбонат (НСО3)<br>
Бор (В)<br>
Бромидион<br>
Водородный показатель (рН)<br>
Диоксид углерода (CO2) <br>
Железо (Fe, суммарно)<br>
Жесткость<br>
Запах при 20 град. С<br>
Запах при 60 град. С <br>
Йодидион (J)<br>
Йод(J)<br>
Кадмий (Cd, суммарно)<br>
Калий (K)<br>
Кальций (Ca)<br>
Кобальт (Со)<br>
Силикаты (по Si)<br>
Литий (Li)<br>
Магний (Mg)<br>
Марганец (Mn)<br>
Медь (Cu,суммарно)<br>
Молибден (Mo, суммарно)<br>
Мутность<br>
Мышьяк (As)<br>
Натрий (Na)<br>
Нефтепродукты<br>
Никель (Ni,суммарно)<br>
Нитраты (по NO3)<br>
Нитриты (по NO2)<br>
Окисляемость перманганатная<br>
Привкус<br>
Поверхностно активные вещества (ПАВ) анионоактивные<br>
Фосфаты (РО4)<br>
Растворенный кислород<br>
Ртуть (Hg, суммарно)<br>
Свинец (Pb, суммарно)<br>
Селен (Se)<br>
Серебро (Ag)<br>
Сероводород (H2S)<br>
Сурьма (Sb)<br>
Общая минерализация (сухой остаток)<br>
Стронций (Sr (2+))<br>
Сульфаты<br>
Фенолы летучие (суммарно)<br>
Фторидион<br>
Формальдегид<br>
Хлориды<br>
Хлор остаточный связанный<br>
Хлор остаточный cвободный<br>
Хром (Cr (6+))<br>
Цветность<br>
Цианиды (по CN)<br>
Цинк (Zn (2+))<br>
Щелочность<br>
</div></div></div>
<!-- ===========================================конец окна==================================================== -->
<div id="gallery"><!-- ==============================начало окна 2=========================================================== -->
<div><b class="switch"><span class="turn_on">+</span><span class="turn_off">-</span>2 Топливо твердое</b>
<div class="hide">
<h3>определяемый компонент</h3>
Зольность<br>
Массовая доля серы общей<br>
Массовая доля хлора<br>
Массовая доля мышьяка
</div></div></div>
<!-- ===========================================конец окна================================================================= -->
<div id="gallery"><!-- ==============================начало окна 3=========================================================== -->
<div><b class="switch"><span class="turn_on">+</span><span class="turn_off">-</span>3 Удобрения  минеральные</b>
<div class="hide">
<h3>определяемый компонент</h3>
Массовая доля питательных веществ:<br>
общие фосфаты<br>
усвояемые фосфаты<br>
водорастворимые фосфаты<br>
калий в пересчете на K2O<br>
азот общий в аммонийной и амидной формах<br>
азот в нитратной форме<br>
азот общий в аммонийной и нитратной формах<br>
азот в амидной форме<br>
азот в аммонийной форме в солях аммония (кроме фосфорных)<br>
Массоваядоля микроэлементов:<br>
бор общий <br>
марганец водорастворимый<br>
молибден водорастворимый<br>
медь общ.<br>
цинк общ.<br>
кобальт<br>
железо<br>
Массовая доля воды<br>
Гранулометрический состав, для гранулированных и
порошковидных удобрений<br>
Массовая доля примесей токсичных элементов:<br>
мышьяка<br>
свинца<br>
кадмия
</div></div></div>
<!-- ===========================================конец окна================================================================= -->
</body>
</html>
Ответить с цитированием