BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

Совсем недавно на мой блог 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>

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

Получай обновления блога!!! Подпишись:

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

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

  1. nesnayka

    Меня все мучает реализация всяких 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: "Открыть";
    }
    
  2. nesnayka

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

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573