Разворачивающийся блок по клику
Добрый день!
Помогите решить проблему, есть скрипт который открывает и закрывает блоки, но задача стоит в том чтобы закрывать предыдущий открытый блок при открытии нового:
<!DOCTYPE html>
<html>
<head>
<style>
.cont {
cursor:pointer;
}
.cont-hide {
display:none;
}
.cont-show {
text-align:left;
display:block;
width:215px;
}
.cont-show a {
text-decoration:none;
color:#BAB7B8;
}
.cont-show a:hover {
text-decoration:none;
color:green;
}
</style>
<div class="cont">1_1
<div class='cont-hide'>text1
</div>
</div>
<div class="cont">2_2
<div class='cont-hide'>text2
</div>
</div>
<script>
var contents = document.getElementsByClassName('cont');
for ( i = 0; i < contents.length; i++){
contents[i].onclick = function() {show(this);};
}
function show(elem){
var text = elem.getElementsByTagName('div')[0];
var clas = text.getAttribute('class');
if (clas == 'cont-hide') text.setAttribute('class', 'cont-show');
else if (clas == 'cont-show') text.setAttribute('class', 'cont-hide');
}
</script>
</html>
|
Vor_tex,
вот интересно как здесь https://learn.javascript.ru/event-delegation кликаешь и с предыдущей ячейки снимается выделение, может это вам подойдёт. P.S. то что вы ищите уже существует в 210 экзмплярах на форуме, кодовое слово "открывашка" :lol: |
Пролема в том что мне все это нужно прикрутить к mediawiki, другие подобные скрипты не могу запустить... они не могут подхватить getElementsById...
|
что можно сделать чтобы при открытии блока 2_2, закрывался блок 1_1 если он был открыт и наоборот???
|
Открывашка 211
:cray: :cray: :cray: :cray: :cray:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.cont {
cursor:pointer;
}
.cont-hide {
display:none;
}
.cont-show {
text-align:left;
display:block;
width:215px;
}
.cont-show a {
text-decoration:none;
color:#BAB7B8;
}
.cont-show a:hover {
text-decoration:none;
color:green;
}
</style>
</head>
<body>
<div class="cont">1_1
<div class='cont-hide'>text1
</div>
</div>
<div class="cont">2_2
<div class='cont-hide'>text2
</div>
</div>
<script>
var contents = document.getElementsByClassName('cont');
for ( i = 0; i < contents.length; i++){
contents[i].onclick = function() {show(this);};
}
var selectedText;
function show(elem){
var text = elem.getElementsByTagName('div')[0];
var clas = text.className;
selectedText && text != selectedText && (selectedText.className = 'cont-hide')
text.className = clas == 'cont-hide' ? 'cont-show' : 'cont-hide';
selectedText = text
}
</script>
</body>
</html>
|
вы мой спаситель, увы но мои знания мизерны в этом деле...
|
рони,
Давно ищу подобный скрипт, но есть проблема и в данном варианте: содержимое блоков, т.е TEXT 1, TEXT 2 - кликабельны! Как избавиться от этого? Нужно чтобы только открытие блоков(1_1, 2_2) было кликабельно, а содержимое - нет. ----------- Может можно как-то вот этот вариант модернизировать:
<script type="text/javascript">
function openbox(id){
display = document.getElementById(id).style.display;
if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}
</script>
<a href="#" onclick="openbox('box'); return false"> Блок 1: Открыть/Закрыть </a>
<div id="box" style="display: none;"> Содержимое блока 1 </div>
<a href="#" onclick="openbox('box2'); return false"> Блок 2: Открыть/Закрыть </a>
<div id="box2" style="display: none;"> Содержимое блока 2 </div>
<a href="#" onclick="openbox('box3'); return false"> Блок 3: Открыть/Закрыть </a>
<div id="box3" style="display: none;"> Содержимое блока 3 </div>
задача таже: чтобы закрывался предыдущий открытый блок при открытии нового |
Окрывашка 242
Feex,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.cont {
cursor:pointer;
}
.cont-hide {
display:none;
}
.cont-show {
text-align:left;
display:block;
width:215px;
}
.cont-show a {
text-decoration:none;
color:#BAB7B8;
}
.cont-show a:hover {
text-decoration:none;
color:green;
}
</style>
</head>
<body>
<div class="cont">1_1
<div class='cont-hide'>text1
</div>
</div>
<div class="cont">2_2
<div class='cont-hide'>text2
</div>
</div>
<script>
var contents = document.getElementsByClassName('cont');
for ( i = 0; i < contents.length; i++){
contents[i].onclick = function() {show(event,this);};
}
var selectedText;
function show(event,elem){
if(event.target != elem) return;
var text = elem.getElementsByTagName('div')[0];
var clas = text.className;
selectedText && text != selectedText && (selectedText.className = 'cont-hide')
text.className = clas == 'cont-hide' ? 'cont-show' : 'cont-hide';
selectedText = text
}
</script>
</body>
</html>
|
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.cont {
cursor:pointer;
}
.cont-hide {
display:none;
}
.cont-show {
text-align:left;
display:block;
width:215px;
}
.cont-show a {
text-decoration:none;
color:#BAB7B8;
}
.cont-show a:hover {
text-decoration:none;
color:green;
}
</style>
</head>
<body>
<div class="cont">Блок 1
<div class='cont-hide'>text1</div>
</div>
<div class="cont"><h4><font color="#5FAD00">Блок 2:</font> Открыть/Закрыть</h4>
<div class='cont-hide' style="background:#d3ebf6; border: 1px solid #AAA; padding:14px 14px 14px 14px; border-radius:12px;">text2</div>
</div>
<script>
var contents = document.getElementsByClassName('cont');
for ( i = 0; i < contents.length; i++){
contents[i].onclick = function() {show(event,this);};
}
var selectedText;
function show(event,elem){
if(event.target != elem) return;
var text = elem.getElementsByTagName('div')[0];
var clas = text.className;
selectedText && text != selectedText && (selectedText.className = 'cont-hide')
text.className = clas == 'cont-hide' ? 'cont-show' : 'cont-hide';
selectedText = text
}
</script>
</body>
</html>
стилизованный блок не работает. в предыдущем Вашем варианте стилизация блока работала без проблем. единственное, что мешало, это кликабельность содержимого блока. А нельзя вообще уйти от модели блок в блоке? Тоже не очень хорошо. Может можно мой вариант как-то все-таки модернизировать? Буду благодарен. Ибо уже запарился искать нормальный вариант(ссылка-блок), что бы всё работало как надо. |
Feex,
то есть выбрать из 242 вариантов вам слабо, неужели вы думаите что среди них нет вашего? искать открывашка |
| Часовой пояс GMT +3, время: 23:46. |