Javascript-форум - Помогите упростить код спойлера

Помогите, пожалуйста упростить код. Уровень у меня слабый, а хочется сделать красиво. Есть необходимость изменить параметры кода так, чтобы он наследовал все функции (размер шрифта, цвет и пр) у страницы, в которую бы его не вставили. Приведенный список состоит из более 50 позиций, поэтому привел первые несколько. Ну или ткните, где можно посмотреть подобный вариант. Вот оригинал http://chem-center.ru/uslugi1.html

<html><head><font size=4>  <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; height:500px;}<!-- ===раст между строчками,ширина ссылок=================== -->
#gallery h3 {color:red; font:18px;}<!-- ================================цвет названия заголовка окна с текстом=================== -->
#gallery h3.color {color:#000; margin:12px 25px;}
#gallery .switch {display:block; cursor:pointer; color:#0000ff; font-weight:normal;}<!-- ===цвет ссылки до нажатия=================== -->
#gallery .switch .turn_off {display:none;}
#gallery .off {color:#c00;}<!-- ==========================================================цвет ссылки после нажатия=================== -->
#gallery .off .turn_off {display:inline;}
#gallery .off .turn_on {display:none;}
#gallery .hide {display:none;}
#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-color:#0cc; color:#048; padding:10px;}
#gallery dl {width:370px;}
  </style>
  <script type="text/javascript">
onload = function() {
var e, i = 0;
while (e = document.getElementById('gallery').getElementsByTagName ('B') [i++]) {
if (e.className == 'switch') {
e.onclick = function () {
var getEls = document.getElementById('gallery').getElementsByTagName('DIV');
for (var z=0; z<getEls.length; z++) {
if (getEls[z].className == 'hide') {
w=getEls[z].previousSibling;
while (w.nodeType!=1) {
w=w.previousSibling;
}
w.className=w.className.replace('switch over', 'switch');
}
if (getEls[z].className == 'show') {
getEls[z].className=getEls[z].className.replace('show', 'hide');
w=getEls[z].previousSibling;
while (w.nodeType!=1) {
w=w.previousSibling;
}
w.className=w.className.replace('switch off', 'switch over');
}
}
this.className = this.className == 'switch' ? 'switch off' : 'switch';
x=this.nextSibling;
while (x.nodeType!=1) {
x=x.nextSibling;
}
x.className = this.className == 'switch off' ? 'show' : 'hide';
}
}
}
}
  </script>
</head>
<!-- =================================начало блока=========================================================== -->
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 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 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>
<!-- ===========================================конец окна================================================================= -->

<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <style> #tab-container *{ padding:0; margin:0; border:0 none; } #tab-container{ position:relative; width:700px; margin:0 auto; } #tab-container table.tab { border-collapse:collapse; } #tab-container table.tab tr{ vertical-align:top; width:100%; } #tab-container table.tab td{ width:50%; border:1px solid #000; padding:7px 1em; } #tab-container div[id^="tab-"] { display:none; } #tab-container #tab-1:target, #tab-container #tab-2:target, #tab-container #tab-3:target{ display:block; } </style> </head> <div id="tab-container"> <h2>I РАЗДЕЛ Продукция подлежащая обязательному<BR>подтверждению соответствия</h2> <br> <a href="#tab-1">1 Вода питьевая, расфасованная в емкости</a><br> <a href="#tab-2">2 Топливо твердое</a><br> <a href="#tab-3"><span class="turn_on">3 Удобрения минеральные</a><br> <br> <br> <div id="tab-1"> <table class="tab"><tr> <td colspan=2> <h3>1 определяемый компонент</h3> </td></tr> <tr><td width=50%> Алюминий(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> </td> <td width=50%> Никель (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> </td></tr></table></div> <div id="tab-2"> <table class="tab"><tr> <td colspan=2 width=100%> <h3>2 определяемый компонент</h3> </td></tr> <tr><td colspan=2> Массовая доля питательных веществ:<br> общие фосфаты<br> усвояемые фосфаты<br> водорастворимые фосфаты<br> калий в пересчете на K2O<br> азот общий в аммонийной и амидной формах<br> азот в нитратной форме<br> азот общий в аммонийной и нитратной формах<br> азот в амидной форме<br> азот в аммонийной форме в солях аммония (кроме фосфорных)<br> Массоваядоля микроэлементов:<br> бор общий <br> марганец водорастворимый<br> молибден водорастворимый<br> медь общ.<br> цинк общ.<br> кобальт<br> железо<br> Массовая доля воды<br> Гранулометрический состав, для гранулированных и порошковидных удобрений<br> Массовая доля примесей токсичных элементов:<br> мышьяка<br> свинца<br> кадмия </td></tr></table></div> <div id="tab-3"> <table class="tab"><tr> <td colspan=2 width=100%> <h3>3 определяемый компонент</h3> </td></tr> <tr><td colspan=2> Зольность<br> Массовая доля серы общей<br> Массовая доля хлора<br> Массовая доля мышьяка </td></tr></table></div> </div> </body> </html>

<!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>подтверждению соответствия  <div id="gallery"> <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"> <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"> <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>