Форум Сайтостроение Веб-строительство

Сворачивание информации

Meravingen
На сайте с 13.11.2007
Offline
76
Meravingen
941

Подскажите, как сделать аналог: http://orionnet.ru/price/phisical/

Искал в Яндексе, но там все на яваскрипте мне попадалось, с кнопками. А мне надо как тут, без кнопок. На заголовок тыкаешь, и разворачивается информация.

AlikZP
На сайте с 22.11.2009
Offline
107
AlikZP
#1

Да то же самое что и с кнопками. Какая разница куда вешать обработчик - на кнопку или на ссылку

Website CMS: быстрая, удобная, недорогая! Вечная лицензия за 45$ (/ru/forum/524503) Яся - быстрый поиск фото для товаров. OpenCart/ocStore. Дополнение. (/ru/forum/665287) Грамотная верстка ваших макетов (/ru/forum/comment/8853216)
S
На сайте с 14.04.2008
Offline
60
seraphim
#2

Используйте jQuery (вот пример: http://www.stunicholls.com/various/jquery-more-less.html), mootools или тому подобную стабильную библиотеку, и будет вам щастье...

AlikZP
На сайте с 22.11.2009
Offline
107
AlikZP
#3

Вот /ru/forum/517978 топик про похожую задачу.

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

Если не справитесь - в личку. Помогу платно, правда...

4arger
На сайте с 17.12.2008
Offline
95
4arger
#4

примерно так: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Заголовок</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(function(){

	var header = $('div.menu div h3');

	header.wrapInner('<a href="#"></a>').nextAll().hide();

	$('div.menu div:first h3').nextAll().show();

	header.find('a').click(function() {

		header.nextAll().hide('slow');

		$(this).parent().nextAll().show('slow');

		return false;

	});

});

</script>

</head>



<body>

<div class="menu">

	<div>

		<h3>Тариф 1</h3>

		<p>text text</p><p>text text</p><p>text text</p>

	</div>

	<div>

		<h3>Тариф 2</h3>

		<p>text text</p><p>text text</p><p>text text</p>

	</div>

	<div>

		<h3>Тариф 3</h3>

		<p>text text</p><p>text text</p><p>text text</p>

	</div>

</div>

</body>

</html>
Meravingen
На сайте с 13.11.2007
Offline
76
Meravingen
#5

4arger, спасибо!! Взрыв мозга отменяется!!!

Meravingen добавил 06.07.2010 в 13:10

А еще маленький нюанс. Можно как-нибудь сделать, чтобы один из пунктов был по дефолту раскрыт?

4arger
На сайте с 17.12.2008
Offline
95
4arger
#6
Meravingen:
А еще маленький нюанс. Можно как-нибудь сделать, чтобы один из пунктов был по дефолту раскрыт?

"Тариф 1" при загрузке страницы должен быть открыт. у вас нет?

Meravingen
На сайте с 13.11.2007
Offline
76
Meravingen
#7

Нет, не открыт

4arger
На сайте с 17.12.2008
Offline
95
4arger
#8

div с классом default при загрузке открыт.

default можно добавить любому диву, хоть всем. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Заголовок</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(function(){

	var header = $('div.menu div h3');

	header.wrapInner('<a href="#"></a>').nextAll().hide();

	$('div.menu div.default h3').nextAll().show();

	header.find('a').click(function() {

		if($(this).parent().nextAll().css('display') == 'none') {

			header.nextAll().hide('slow');

			$(this).parent().nextAll().show('slow');

		}

		return false;

	});

});

</script>

</head>



<body>

<div class="menu">

	<div class="default">

		<h3>Тариф 1</h3>

		<p>text text</p><p>text text</p><p>text text</p>

	</div>

	<div>

		<h3>Тариф 2</h3>

		<p>text text</p><p>text text</p><p>text text</p>

	</div>

	<div>

		<h3>Тариф 3</h3>

		<p>text text</p><p>text text</p><p>text text</p>

	</div>

</div>

</body>

</html>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий