Как закрыть один div когда открыт другой ?

MJ

44

MusicJam

1 декабря 2014, 02:01

7330

Здравствуйте ! Есть два блока, которые по кликам на ссылки показывает скрытое содержимое:

<div class="register">содержимое 1</div>

и

<div class="login">содержимое 2</div>

При нажатии на каждую, всплывает окошко (сделано аналогичным образом к каждому, просто переназваны стили).

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

Собственно вопрос, возможно ли средствами CSS и jquery принудительно закрывать один блок если открыт другой ? (Или другими средствами)

Заранее очень благодарен.

L

83

l17l

1 декабря 2014, 02:56

#1

Допустим есть кнопка

<button type="button" onclick="document.getElementById('city').style.display='block';" class="deletedd11a">Кнопка</button>

Нажимаем на кнопку и открывается блок

Информация в срытом блоке

</div>

меняй id и создавай сколько угодно блоков.

Допустим есть кнопка

<button type="button" onclick="document.getElementById('city1').style.display='block';" class="deletedd11a">Кнопка</button>

Нажимаем на кнопку и открывается блок

Информация в срытом блоке

</div>

1

3

VizInit

1 декабря 2014, 03:33

#2

Один из многочисленных вариантов.

Код не проверял, набросал по памяти.

В CSS устанавливаем 2 класса:

.open {display:block;}
.close {display:none;}

В HEAD прописываем кусок кода:

$(function() {
    $("#link_login").click(function(){
        if ($(".register").hasClass("open"))
        {
            $(".register").removeClass("open");
            $(".register").addClass("close");
        }
        $(".login").removeClass("close");
        $(".login").addClass("open");
    }) ;
    $("#link_register").click(function(){
        if ($(".login").hasClass("open"))
        {
            $(".login").removeClass("open");
            $(".login").addClass("close");
        }
        $(".register").removeClass("close");
        $(".register").addClass("open");
    }) ;
});

<a id="link_login" href="#">LOGIN</a>
<a id="link_register" href="#">REGISTER</a>

<div class="register close">содержимое 1</div> 
<div class="login close">содержимое 2</div>

1

Помогаю в решении технических задач.

MJ

44

MusicJam

1 декабря 2014, 12:00

#3

Спасибо, но не получается. Попробую немножко точнее описать.

Есть два класса:

<div class="register-block-hidden">содержимое 1</div>

<div class="login-block-hidden">содержимое 2</div>

Вызываются они посредством css+jquery:

<div class="register">Вызвать содержимое 1</div>

<div class="login">Вызвать содержимое 2</div>.

Нужно сделать так, чтобы нельзя было вызвать 2 блока сразу, т.е., если один открыт, другой должен был закрыт. Т.е. если открыт блок с "содержимое 1" и я нажимаю вызвать блок с "содержимым 2", блок с "содержимым 1" закрывался.

VizInit, Ваш код не работает, почему-то ссылка сразу пропадает при вызове функции, т.е. невозможно повторно вызвать блок.

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

MJ

44

MusicJam

1 декабря 2014, 15:31

#4

Пожалуйста, помогите, ведь есть знающие, всю голову сломал...

3

VizInit

1 декабря 2014, 16:57

#5

MusicJam:
Пожалуйста, помогите, ведь есть знающие, всю голову сломал...

Код переписал. Проверил. Работает.

Если будут какие либо вопросы, можете отписать по моим контактам.


<html>

	<head>

		<title>test</title>

		<style type="text/css">

			.register-block-hidden {display:none;}

			.register-block-visible {display:block;}



			.login-block-hidden {display:none;}

			.login-block-visible {display:block;}

		</style>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

		<script type="text/javascript">

			$(function(){



				$(".register").click(function(){

					$(".login-block-visible").removeClass('login-block-visible').addClass('login-block-hidden');

					$(".register-block-hidden").removeClass('register-block-hidden').addClass('register-block-visible');

				});



				$(".login").click(function(){

					$(".register-block-visible").removeClass('register-block-visible').addClass('register-block-hidden');

					$(".login-block-hidden").removeClass('login-block-hidden').addClass('login-block-visible');

				});



			});

		</script>

	</head>

	<body>

		<div class="register-block-hidden">Content 1</div>

		<div class="login-block-hidden">Content 2</div>



		<div class="register">Show Content 1</div>

		<div class="login">Show Content 2</div>

	</body>

</html>

162

Mad_Man

1 декабря 2014, 17:08

#6

VizInit, откройте для себя toggleClass.

1

3

VizInit

1 декабря 2014, 18:12

#7

Mad_Man:
VizInit, откройте для себя toggleClass.

Одобряю, с ним кошернее =)

MJ

44

MusicJam

1 декабря 2014, 18:13

#8

VizInit, большущее Вам человеческое спасибо ! Все работает на ура ! :)

Побольше бы таких как Вы ;) Приятного Вам вечера и еще раз спасибо за помощь!)

3

VizInit

1 декабря 2014, 18:15

#9

MusicJam:
VizInit, большущее Вам человеческое спасибо ! Все работает на ура ! :)
Побольше бы таких как Вы ;) Приятного Вам вечера и еще раз спасибо за помощь!)

Всегда пожалуйста. Нужна будет помощь, обращайтесь. Буду рад помочь.

Маркетинг для шоколадной фабрики. На 34% выше средний чек

В 2023 году Одноклассники пресекли более 9 млн подозрительных входов в учетные записи