Javascript-форум - jquery выпадающая информация при нажатии на ссылку

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - jquery выпадающая информация при нажатии на ссылку (https://javascript.ru/forum/events/36289-jquery-vypadayushhaya-informaciya-pri-nazhatii-na-ssylku.html)

jquery выпадающая информация при нажатии на ссылку

Есть у меня нехитрый код который открывает выпадающий текст при нажатии на ссылку (2 ссылки и более)... Всё работает всё в порядке, но вот мне надо что бы когда я "открываю" следующий выпадающий текст предыдущий закрывался (что бы открыт был только один), что надо вставить в мой код что бы так было, или хотя бы исходник где такое реализовано, а дальше я определюсь

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="windows-1251">
	<title>Квартира</title>
	<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script>
  $(function() {
  	$(".btn-slide").click(function() {
    $("#panel").slideToggle("slow");
    $(this).toggleClass("active"); return false;
  	});
  });
    $(function() {
  	$(".btn-slide2").click(function() {
    $("#panel2").slideToggle("slow");
    $(this).toggleClass("active"); return false;
  	});
  });
	</script>
	<style>
  #panel {    
  	display: none;
  	padding: 5px;
  	width: 400px;
  	height: 200px;
  	background: #09F;
  	color: #FFF;
  	}
  .btn-slide {
  	background: #CCC;
  	color: #06F;
  	}
  .active {
  	background: #FF9;
  	}
    	#panel2 {    
  	display: none;
  	padding: 5px;
  	width: 400px;
  	height: 200px;
  	background: #09F;
  	color: #FFF;
  	}
  .btn-slide2 {
  	background: #CCC;
  	color: #06F;
  	}
  .active {
  	background: #FF9;
  	}
	</style>
</head>
<body>
	<a href="" class="btn-slide">Квартира №1<br></a>
<div id="panel">Выберите действие<br>
<form action="#" method="get" target="_work">
<p id="txt">
<input checked="" type="radio">Аренда (сут.)<br>
<input type="radio"> Аренда (мес.)<br>
<input type="radio"> Продажа<br> <br>
<input value="ок" onclick="#'" type="submit">  
<input value="отмена" onclick="#'" type="button"></p></form></div>

	<a href="" class="btn-slide2">Квартира №1<br></a>
<div id="panel2">Выберите действие<br>
<form action="#" method="get" target="_work">
<p id="txt">
<input checked="" type="radio">Аренда (сут.)<br>
<input type="radio"> Аренда (мес.)<br>
<input type="radio"> Продажа<br> <br>
<input value="ок" onclick="#'" type="submit">  
<input value="отмена" onclick="#'" type="button"></p></form></div>
</body>
</html>

Гробовщик,
сразу код в топку: а если у тебя на странице будет ну хотя бы 50 квартир?
Ну а по теме: ищи элементы например с классом active и тугли его - всё закроется.

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

Э-мммм... я имел ввиду скриптом ищи.
Т.е. логика такая должна быть: "как только кликнули по ссылке ищем элемент(ы) с классом active и убираем (тугглим) этот класс, далее проявляем форму под ссылкой".
Пример http://jquery.page2page.ru/index.php...81%D1%81%D0%B0

Цитата:

Сообщение от Гробовщик (Сообщение 239814)

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="windows-1251">
	<title>Квартира</title>
	<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script>
  $(function() {
  	$(".btn-slide").click(function() {
    $("#panel").slideToggle("slow");
    $(this).toggleClass("active"); return false;
  	});
  });
    $(function() {
  	$(".btn-slide2").click(function() {
    $("#panel2").slideToggle("slow");
    $(this).toggleClass("active"); return false;
  	});
  });
	</script>
	<style>
  #panel {    
  	display: none;
  	padding: 5px;
  	width: 400px;
  	height: 200px;
  	background: #09F;
  	color: #FFF;
  	}
  .btn-slide {
  	background: #CCC;
  	color: #06F;
  	}
  .active {
  	background: #FF9;
  	}
    	#panel2 {    
  	display: none;
  	padding: 5px;
  	width: 400px;
  	height: 200px;
  	background: #09F;
  	color: #FFF;
  	}
  .btn-slide2 {
  	background: #CCC;
  	color: #06F;
  	}
  .active {
  	background: #FF9;
  	}
	</style>
</head>
<body>
	<a href="" class="btn-slide">Квартира №1<br></a>
<div id="panel">Выберите действие<br>
<form action="#" method="get" target="_work">
<p id="txt">
<input checked="" type="radio">Аренда (сут.)<br>
<input type="radio"> Аренда (мес.)<br>
<input type="radio"> Продажа<br> <br>
<input value="ок" onclick="#'" type="submit">  
<input value="отмена" onclick="#'" type="button"></p></form></div>

	<a href="" class="btn-slide2">Квартира №1<br></a>
<div id="panel2">Выберите действие<br>
<form action="#" method="get" target="_work">
<p id="txt">
<input checked="" type="radio">Аренда (сут.)<br>
<input type="radio"> Аренда (мес.)<br>
<input type="radio"> Продажа<br> <br>
<input value="ок" onclick="#'" type="submit">  
<input value="отмена" onclick="#'" type="button"></p></form></div>
</body>
</html>

<a href="" class="btn-slide"  data-section="1">Квартира №1<br></a>
<div id="panel1" class="showhide" style="display:none;">Выберите действие<br>
<form action="#" method="get" target="_work">
<p id="txt">
<input checked="" type="radio">Аренда (сут.)<br>
<input type="radio"> Аренда (мес.)<br>
<input type="radio"> Продажа<br> <br>
<input value="ок" onclick="#'" type="submit">  
<input value="отмена" onclick="#'" type="button"></p></form></div>

	<a href="" class="btn-slide" data-section="2">Квартира №1<br></a>
<div id="panel2" class="showhide" style="display:none;">Выберите действие<br>
<form action="#" method="get" target="_work">
<p id="txt">
<input checked="" type="radio">Аренда (сут.)<br>
<input type="radio"> Аренда (мес.)<br>
<input type="radio"> Продажа<br> <br>
<input value="ок" onclick="#'" type="submit">  
<input value="отмена" onclick="#'" type="button"></p></form></div>

<script>
  $(function() {

    $(".btn-slide").click(function() {
    var data = $(this).data('section');
    $(".showhide").hide();
        $("#panel"+data).slideToggle("slow");
     
    $("a.btn-slide").removeClass("active");
    $(this).toggleClass("active"); return false;
    });
  });
    </script>

Вроде так ))

По крайней мере вот тут работает
http://jsfiddle.net/awR4m/

Ну можешь еще поиграть с командой hide(); вместо нее сделай чтоб панель уезжала обратно

Mukhtar, действительно всё работает как нельзя лучше, кнопка "отмена" тоже заработала когда получила class="btn-slide"

Цитата:

Сообщение от Гробовщик (Сообщение 239944)

Mukhtar, действительно всё работает как нельзя лучше, кнопка "отмена" тоже заработала когда получила class="btn-slide"

Я так понимаю, это то, что нужно! )))

Mukhtar,
Именно так оно и есть) Мне удалось сделать так что из бд для каждой квартиры "вышедшей" из БД есть выпадающий список, теперь всё гораздо легче))))

А как сделать это дело в столбик?

Т.е. чтобы располагалось на странице 8 столбиков, 4 в ряд, и при клике по картинке после ряда выдвигалась информация по середине, отодвигая нижние 4 столбика вниз? Например как тут с картинками и подписями к ним (https://mailchimp.com/about/).

zeny0098,
начните сделайте html и css

Мне бы суть, получается что выдвигаясь он смещает все столбики.
Вот как сделать блок чтобы он не сдвигал остальные? А выдвигался внизу во всю ширину, на одном месте у всех. Пока хрень одна получается (http://jsfiddle.net/awR4m/49/)

Спасибо большое! Очень помогли!:thanks: