Главная » Вебмастеру » Как сделать, чтобы при нажатии на первый блок, второй закрывался

Как сделать, чтобы при нажатии на первый блок, второй закрывался

2017-02-14 / Вр:11:40 / просмотров: 6173

Совсем недавно на мой блог BlogGood.ru пришел комментарий:

«… к примеру, есть 2 блока рядом, как сделать, чтобы при нажатии на второй, первый закрывался?»

Вы уж извините, что у моей статьи сегодня такое длинное и непонятное название. Другого заголовка для нее придумать я не смог. Остается надеяться, что написанное в статье будет понятным и полезным.

Итак, как сделать так, чтобы при нажатии на первый блок, второй блок исчезал? Или наоборот, при нажатии на второй блок, исчезал первый.

Добавьте в HTML вот такой код между тегами <body></body>:

<a onclick="hidetxt('div1'); return false;" href="#" rel="nofollow"><div class="blok">
Ссылка 1
</div></a>
<div style="display:none;" id="div1">Текст 1</div>

<a onclick="hidetxt('div2'); return false;" href="#" rel="nofollow"><div class="blok">
Ссылка 2
</div></a>
<div style="display:none;" id="div2">Текст 2</div>

<a onclick="hidetxt('div3'); return false;" href="#" rel="nofollow"><div class="blok">
Ссылка 3
</div></a>
<div style="display:none;" id="div3">Текст 3</div>

Если хотите еще добавить блок, тогда вставьте вот такой код:

<a onclick="hidetxt('divххххххххххх'); return false;" href="#" rel="nofollow"><div class="blok">
Ссылка
</div></a>
<div style="display:none;" id="divххххххххххх">Текст</div>

В строке №1 и №4 вот эти иксы «ххххххххххх» замените таким числом, которое не встречается в верхних блоках.

Теперь CSS код:

.blok
{
border:1px solid #ccc;
padding:10px;
}

JavaScript код вставьте сразу после всех блоков или же между <head></head>:

<script>
var show;
function hidetxt(type){
param=document.getElementById(type);
if(param.style.display == "none") {
if(show) show.style.display = "none";
param.style.display = "block";
show = param;
}else param.style.display = "none"
}
</script>

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Популярные статьи:

Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330330
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274683
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222437
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187489
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186559

2 Ответов на комментарий - Как сделать, чтобы при нажатии на первый блок, второй закрывался

nesnayka

18.02.2017 в 18:50

Меня все мучает реализация всяких JS плюшек без использования самого JS. Потому снова я влезу со своими 5-ю копейками…
Итак, “антиспойлер” с “обратным позиционированием”:

HTML:

<div class="container">
    <input ENGINE="checkbox" id="x" />
    <label class="title" for="x"></label>
    <div class="spoiler">Текст блока, который пропадает.</div>
</div>

CSS:

.container {
    width: 200px;
    position: relative;
}
.container > input[type=checkbox]{
    display: none;
}
.container > .title:before {
    content: "Закрыть";
	border: 1px solid #f77;
	padding: 2px 10px;
	cursor: pointer;
}
.container > .title {
    display: block;
	position: absolute;
	height: 25px;
	padding-top: 75px; /* Тут высота блока, который будет пропадать (.spoiler)*/
	index: -1;
}
.container > .spoiler {
    padding: 4px;
    display: block;
	position: absolute;
	padding-top: 0px;
	height: 67px; /* Тут высота текущего блока, минус его же отступы (75 height - 8 padding[-top и -bottom])*/
	index: 0;
}
.container > :checked ~ .spoiler {
    display: none;
}

.container > :checked ~ .title {
	padding-top: 0px;
}

.container > :checked ~ .title:before {
    content: "Открыть";
}

nesnayka

18.02.2017 в 19:29

Для горизонтального размещения достаточно в вышеприведенном коде заменить все display на visibility с соответствующими им значениями (visible и hidden вместо block и none) и отступ для кнопки сделать не вертикальный, а горизонтальный (padding-top на padding-left)