Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Отображение при клике + закрытие предыдущего (https://javascript.ru/forum/jquery/42881-otobrazhenie-pri-klike-zakrytie-predydushhego.html)

Galyanov 13.11.2013 00:18

Отображение при клике + закрытие предыдущего
 
Здравствуйте.
Использую вот такой скрипт для отображения скрытого блока при клике на ссылку.
Как можно модифицировать скрипт, чтобы можно было раскрывать два блока по очередности, т.е. для каждого блока своя ссылка. И при открытии второго блока, предыдущий чтобы закрывался?

<script>
		$(function() {
			$(".show-block1").click(function() {
				$("#hide-block1").slideToggle("slow");
				$(this).toggleClass("active"); return false;
			});
		});
</script>




<a class="show-block1" href="/">show block1</a>

<div id="hide-block1" style="display:none;">	
	Содержимое блока 1
</div>

mi.rafaylik 13.11.2013 00:29

Если структура постоянная (контроллер > блок, контроллер > блок, контр...),
тогда можно так: http://learn.javascript.ru/play/WQm9

В любом случае принцип такой:
1. Блокам добавить общий класс, по которому будем их скрывать.
2. При нажатии на любой контроллер скрываем все блоки по классу, кроме того который нужно отобразить.
3. Отображаем интересующий нас блок.

Galyanov 13.11.2013 01:40

Цитата:

Сообщение от mi.rafaylik (Сообщение 280726)
Если структура постоянная (контроллер > блок, контроллер > блок, контр...),
тогда можно так: http://jsfiddle.net/rafaylik/7SM43/

В любом случае принцип такой:
1. Блокам добавить общий класс, по которому будем их скрывать.
2. При нажатии на любой контроллер скрываем все блоки по классу, кроме того который нужно отобразить.
3. Отображаем интересующий нас блок.

Спасибо.
А как сделать, если эти две ссылки у меня идут первыми в списке, а открывающиеся блоки внизу.
Я поставил две ссылки рядом, блоки сместил вниз также рядом, и теперь открывается только один блок, а второй нет.

ksa 13.11.2013 08:45

Цитата:

Сообщение от Galyanov
А как сделать

Пора тебе показать пример твоего хтмля... :D

mi.rafaylik 13.11.2013 10:35

Цитата:

Сообщение от Galyanov
если эти две ссылки у меня идут первыми в списке, а открывающиеся блоки внизу

Тогда привязывать контроллеры к своим блокам.
Посмотреть
<a id="showDiv1">show div 1</a>
<a id="showDiv2">show div 2</a>

<div id="div1">div1</div>
<div id="div2">div2</div>
$('#showDiv1').click(function(){
	$('#div1').stop(true, true).slideDown('slow');
	$('#div2').slideUp('slow');
});
$('#showDiv2').click(function(){
	$('#div2').stop(true, true).slideDown('slow');
	$('#div1').slideUp('slow');
});

Galyanov 13.11.2013 18:18

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

Что может быть не так?
Привести свой хтмл в пример?

Galyanov 13.11.2013 18:24

А нет, примите извинения, все работает. В линк ссылки не то прописал.
Огромное человеческое спасибо Вам!:) С меня плюсик как минимум:)

Galyanov 13.11.2013 19:33

Цитата:

Сообщение от mi.rafaylik (Сообщение 280763)
Тогда привязывать контроллеры к своим блокам.
Посмотреть
<a id="showDiv1">show div 1</a>
<a id="showDiv2">show div 2</a>

<div id="div1">div1</div>
<div id="div2">div2</div>
$('#showDiv1').click(function(){
	$('#div1').stop(true, true).slideDown('slow');
	$('#div2').slideUp('slow');
});
$('#showDiv2').click(function(){
	$('#div2').stop(true, true).slideDown('slow');
	$('#div1').slideUp('slow');
});

Не сочтите за наглость, но если бы Вы подсказали как сделать, чтобы при повторном клике на ссылку блок обратно бы закрывался, как это в моем изначальном примере, то это был бы вообще комбо-мега-супер ответ :)

mi.rafaylik 13.11.2013 20:01

slideDown заменить на slideToggle.
Посмотреть
<a id="showDiv1">show div 1</a>
<a id="showDiv2">show div 2</a>

<div id="div1">div1</div>
<div id="div2">div2</div>
$('#showDiv1').click(function(){
	$('#div1').stop(true, true).slideToggle('slow');
	$('#div2').slideUp('slow');
});
$('#showDiv2').click(function(){
	$('#div2').stop(true, true).slideToggle('slow');
	$('#div1').slideUp('slow');
});


Часовой пояс GMT +3, время: 22:00.