Переключение видимости div
Доброго времени суток, уважаемая аудитория!
Увы, в скриптах я полный ламер, поэтому прошу помощи. Есть две кнопки и три дива: <a class="button28" id="toggler2" href="#">Инфо</a><a class="button28" id="toggler" href="#">Лего</a> <div id="front">куча там всего</div> <div id="desinger" style="display: none;">еще куча всего</div> <div id="info" style="display: none;">ну и еще куча</div> Как можно видеть, два дива скрыты. Нужно, чтобы по нажатию на одну кнопку открывался один из скрытых дивов, а тот, который был открыт, скрывался. И менялось название кнопки. А при повторном нажатии на кнопку, возвращалось все в исходное состояние. Со второй кнопкой все точно так же. Только другой див должен открываться. В случае одной кнопки и двух дивов прекрасно работает такой код
window.onload = function() {
document.getElementById('toggler').onclick = function() {
openbox('front', this);
openbox('desinger', this);
return false;
};
};
function openbox(id, toggler) {
var div = document.getElementById(id);
if (div.style.display == 'none') {
div.style.display = 'block';
toggler.innerHTML = 'Панель';
} else {
div.style.display = 'none';
toggler.innerHTML = 'Лего';
}
};
Но вот повторить все это для второй кнопки не получается. Если я записываю такой вот код
window.onload = function() {
document.getElementById('toggler2').onclick = function() {
openbox('front', this);
openbox('info', this);
return false;
};
};
function openbox(id, toggler2) {
var div = document.getElementById(id);
if (div.style.display == 'none') {
div.style.display = 'block';
toggler2.innerHTML = 'Панель';
} else {
div.style.display = 'none';
toggler2.innerHTML = 'Инфо';
}
};
window.onload = function() {
document.getElementById('toggler').onclick = function() {
openbox('front', this);
openbox('desinger', this);
return false;
};
};
function openbox(id, toggler) {
var div = document.getElementById(id);
if (div.style.display == 'none') {
div.style.display = 'block';
toggler.innerHTML = 'Панель';
} else {
div.style.display = 'none';
toggler.innerHTML = 'Лего';
}
};
то работает только кнопка "Лего". Если меняю местами, то кнопка "Инфо". Как заставить обе кнопки работать? |
vospa,
форум - поиск - открывашка |
vospa,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hide{
display: none;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var btn = document.querySelectorAll("[data-id]"),
block = document.querySelectorAll(".toggle");
[].forEach.call(btn, function(item, k) {
item.dataset.text = item.textContent;
var id = item.dataset.id;
item.addEventListener("click", function(event) {
event.preventDefault();
[].forEach.call(block, function(el, i) {
if (el.id == id) {
el.classList.toggle("hide");
el.classList.contains("hide") && block[0].classList.remove("hide")
}
else el.classList.add("hide");
});
[].forEach.call(btn, function(item, i) {
var id = item.dataset.id;
var el = document.getElementById(id)
item.textContent = el.classList.contains("hide") ? item.dataset.text : "Панель" ;
})
})
})
});
</script>
</head>
<body>
<a class="button28" id="toggler2" href="#" data-id="info">Инфо</a><a class="button28" id="toggler" href="#" data-id="desinger" >Лего</a>
<div id="front" class="toggle">front куча там всего</div>
<div id="desinger" class="toggle hide">Лего еще куча всего</div>
<div id="info" class="toggle hide">info ну и еще куча</div>
</body>
</html>
|
рони,
Вооо!!! Большое человеческое спасибо! А то полдня угробил почти вслепую тыкаясь. Открывашка, это не то, что мне нужно было. А вот это, то, что надо. Еще раз, спасибо :-) |
Цитата:
|
Цитата:
Еще раз, спасибо. Вставил в проект, панель для ФШ работает на ура! |
| Часовой пояс GMT +3, время: 07:41. |