toggly скрывает/раскрывает div, но если не скрыть его а выбрать следующую ссылку div открывается поверх предыдущего, и что бы теперь отбразить самый первый не закрытый div,нужно сначала скрывать все после открытые, умоляю подскажите как сделать что бы всегда показывался только один div.
<div id="maket">
<div id="header">
<form name="search" action="search.php" method="post" class="search">
<input type="search" name="query" placeholder="поиск по ФИО/должности/отделу" class="input" />
<input type="submit" name="" value="" class="submit" />
</form>
</div>
<div id='left' class='toggle' onclick='display = 'none''> <table border = 1 width = 100%><tr><td colspan = 3 align = center><h4>Руководство филиала</h4></td></tr>
<tr><td>
<a class='toggler' href='#'>Багов Вячеслав Фёдорович</a>
<div id='content' class='content' style='display:none'>
<table border = 1 width = 100%>
<tr><td>ФИО</td><td>Багов Вячеслав Фёдорович</td></tr>
<tr><td>Должность</td><td>Директор</td></tr>
<tr><td>Подразделение</td><td>Руководство филиала</td></tr>
<tr><td>Телефон</td><td>(3462) 37-77-01</td></tr>
<tr><td>Телефон газовый</td><td></td></tr>
<tr><td>Телефон внутренний</td><td>101</td></tr>
<tr><td>Телефон мобильный</td><td>9227978135</td></tr>
<tr><td>Здание/номер кабинета</td><td> </td></tr>
<tr><td>E-mail</td><td></td></tr>
<tr><td>Фото</td><td><img src='photo/Photo1.jpg' width='150' height='200' alt='Багов Вячеслав Фёдорович'></td></tr>
</table>
</div>
</td>
<td>Директор</td>
<td>(3462)</td>
</tr><tr><td colspan = 3 align = center><h4>Участок погрузки</h4></td></tr>
<tr><td>
<a class='toggler' href='#'>Сменные работники</a>
<div id='content' class='content' style='display:none'>
<table border = 1 width = 100%>
<tr><td>ФИО</td><td>Сменные работники</td></tr>
<tr><td>Должность</td><td>Приемосдатчик груза и багажа</td></tr>
<tr><td>Подразделение</td><td>Участок погрузки</td></tr>
<tr><td>Телефон</td><td>(3462)</td></tr>
<tr><td>Телефон газовый</td><td>(771) 54-728</td></tr>
<tr><td>Телефон внутренний</td><td>1174 1175</td></tr>
<tr><td>Телефон мобильный</td><td></td></tr>
<tr><td>Здание/номер кабинета</td><td> </td></tr>
<tr><td>E-mail</td><td></td></tr>
<tr><td>Фото</td><td><img src='photo/noavatar.jpg' width='150' height='200' alt='Сменные работники'></td></tr>
</table>
</div>
</td>
<td>Приемосдатчик груза и багажа</td>
<td>(3462) 954-728</td>
</tr><tr><td colspan = 3 align = center><h4>Диспетчерский отдел</h4></td></tr>
<tr><td>
<a class='toggler' href='#'>Баг Лариса Викторовна</a>
<div id='content' class='content' style='display:none'>
<table border = 1 width = 100%>
<tr><td>ФИО</td><td>Баг Лариса Викторовна</td></tr>
<tr><td>Должность</td><td>Заместитель</td></tr>
<tr><td>Подразделение</td><td>Диспетчерский отдел</td></tr>
<tr><td>Телефон</td><td>(3462)</td></tr>
<tr><td>Телефон газовый</td><td>(771)</td></tr>
<tr><td>Телефон внутренний</td><td>1152</td></tr>
<tr><td>Телефон мобильный</td><td></td></tr>
<tr><td>Здание/номер кабинета</td><td> </td></tr>
<tr><td>E-mail</td><td><a href=mailto:blv@mail.ru>blv@mail.ru</a></td></tr>
<tr><td>Фото</td><td><img src='photo/noavatar.jpg' width='150' height='200' alt='Баг Лариса Викторовна'></td></tr>
</table>
</div>
</td>
<td>Заместитель</td>
<td>(3462)</td>
</tr></table></div>
</font></TD></TR></TABLE></CENTER>
</TD>
</TR>
</TABLE>
</form>
</TD></TR></TBODY></TABLE>
<div id="footer"></div>
</div>
var base = {
// Поиск элементов по классу
findClass: function(str, node) {
if(document.getElementsByClassName) return (node || document).getElementsByClassName(str);
else {
var node = node || document, list = node.getElementsByTagName('*'), length = list.length, Class = str.split(/\s+/), classes = Class.length, array = [], i, j, key;
for(i = 0; i < length; i++) {
key = true;
for(j = 0; j < classes; j++) if(list[i].className.search('\\b' + Class[j] + '\\b') == -1) key = false;
if(key) array.push(list[i]);
}
return array;
}
},
// Добавление обработчиков событий
bind: function(node, type, listener) {
if(node.addEventListener) node.addEventListener(type, listener, false);
//@cc_on node.attachEvent('on' + type, function() { listener.call(node); });
},
// Реализация DOMContentLoaded
init: [],
ready: function() {
if(!arguments.callee.done) {
arguments.callee.done = true;
if(this.timer) clearInterval(this.timer);
var i, length = this.init.length;
for(i = 0; i < length; i++) this.init[i]();
this.init = [];
}
},
check: function() {
var _this = this, listener = function() {
_this.ready();
};
if(document.addEventListener) document.addEventListener('DOMContentLoaded', listener, false);
if(/KHTML|WebKit/i.test(navigator.userAgent)) this.timer = setInterval(function() {
if(/loaded|complete/.test(document.readyState)) base.ready();
}, 10);
/*@cc_on document.write(unescape('%3CSCRIPT onreadystatechange="if(this.readyState==\'complete\') base.ready()" defer=defer src=\/\/:%3E%3C/SCRIPT%3E')); @*/
this.bind(window, 'load', listener);
}
};
// Функции для работы с панельками
var toggler = {
process: function() {
var i, list = base.findClass('toggler'), length = list.length;
for(i = 0; i < length; i++) base.bind(list[i], 'click', this.toggle);
list = base.findClass('content');
length = list.length;
for(i = 0; i < length; i++) list[i].style.display = 'none';
},
toggle: function() {
var content = base.findClass('content', this.parentNode)[0], e = arguments[0] || window.event;
if(content.style.display == 'block') {
content.style.display = 'none';
}
else {
content.style.display = 'block';
}
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
};
// Ищем блоки с классом «toggle» по событию DOMContentLoaded
base.init.push(function() {
toggler.process();
});
// Запускаем проверку готовности DOM
base.check();
[CSS]
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: left;
border-collapse: separate;
border-spacing: 5px;
background: #ECE9E0;
color: #656665;
border: 16px solid #ECE9E0;
border-radius: 20px;
}
th {
font-size: 18px;
padding: 10px;
}
td {
background: #F5D7BF;
padding: 2px;
margin:0 auto;
}
#maket {
width:100%;
margin:0 auto;
}
#header{
}
#left{
top: 8%;
width:60%;
float:left;
}
#content{
/*background-color:#8080FF;
width:40%;
height:60%;
margin-right:61%;
float:right;*/
position: fixed;/*absolute | fixed | relative | static | inherit Абсолютное позиционирование */
top: 8%; /* Положение от нижнего края */
left: 61%; /* Положение от правого края */
right: 5%; /* Положение от правого края */
line-height: 1px;
height: 90%;
}
#footer{
clear:both;
}
.toggle {
width: 200px;
margin: 0 0 14px;
text-align: right;
border: 1px solid #ccc;
}
.toggle .content {
text-align: left;
border: 1px solid #ccc;
background: #eee;
}
.toggle .toggler {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: left;
border-collapse: separate;
border-spacing: 5px;
}
[/CSS]
