Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   При нажатии на ссылку раскрываются все div (https://javascript.ru/forum/jquery/30594-pri-nazhatii-na-ssylku-raskryvayutsya-vse-div.html)

anonimous 09.08.2012 14:31

При нажатии на ссылку раскрываются все div
 
<div class="doctor_z_4">
    <a href="#" class="fa"> Талон 1 </div>
<div class="block" style="display:none;">
    <div class="zap_tal_1">Время 1</div>
</div>
 
<div class="doctor_z_4">
    <a href="#" class="fa"> талон 2</div>
<div class="block" style="display:none;">
    <div class="zap_tal_1">Время 2</div>
</div>
...
<div class="doctor_z_4">
    <a href="#" class="fa"> талон 10</div>
<div class="block" style="display:none;">
    <div class="zap_tal_1">Время 10</div>
</div>

Вот js
<script type="text/javascript">
$(document).ready (function() {
$('.fa').toggle(function() 
{
$('div.block').show('drop', 2000);
}, function()
{
$('div.block').hide('drop', 2000);
});
});
</script>

Теперь что должно быть, изначально при загрузки страницы, должны быть только ссылки с надписями, талон 1 , талон 2 , талон 3 и тд. а div где время 1, время 2, время 3 быть скрытыми! (P.S.: это всё работает), далее при нажатии на ссылку "талон 1" под этой ссылкой, появляется div "время 1" все остальные div скрыты, при нажатии на ссылку "время 2" появлялся div с "время 2". Только вот надо так чтобы класс был у ссылок 1 и класс в div тоже у всех один и тот же. Ну вроде всё рассписал полностью.

mullih 09.08.2012 14:49

если каждый block поставить в doctor_z_4 а anchor закрыть то можно так

<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$('a.fa').click(function () {
				$('div.block').hide();
				$('div.block', $(this).parent()).show();
				return false;
			});
		});
	</script>
</head>
<body>
	<div class="doctor_z_4">
		<a href="#" class="fa">Талон 1</a>
		<div class="block" style="display: none;">
			<div class="zap_tal_1">
				Время 1</div>
		</div>
	</div>
	<div class="doctor_z_4">
		<a href="#" class="fa">талон 2</a>
		<div class="block" style="display: none;">
			<div class="zap_tal_1">
				Время 2</div>
		</div>
	</div>
	...
	<div class="doctor_z_4">
		<a href="#" class="fa">талон 10</a>
		<div class="block" style="display: none;">
			<div class="zap_tal_1">
				Время 10</div>
		</div>
	</div>
</body>
</html>


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