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 |
Цитата:
<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"
|
Цитата:
|
Mukhtar,
Именно так оно и есть) Мне удалось сделать так что из бд для каждой квартиры "вышедшей" из БД есть выпадающий список, теперь всё гораздо легче)))) |
Отлично. ;)
|
| Часовой пояс GMT +3, время: 04:03. |