Реализайция спойлера в таблице

Qwas · October 21, 2010

Здравствуйте! Мне нужна таблица с 4 колонками с возможностью раздвигать/задвигать спойлер при клике на ссылку в таблице.

Попробовал реализовать банальным способом + java скрипт из инета:

http://midgebash.3dn.ru/index/test/0-6

Однако все получилось криво)

И так вопрос: как можно реализовать такую таблицу со спойлером? (В идеале хотелось бы чтобы текст какбэ выезжал вниз, если так незя ничего страшного)

Очень прошу помощи в реализации)

Заранее спасибо!

Edited October 21, 2010 by Qwas

npofopr · October 21, 2010

ну дак оно в любом случае будет колонку раздвигать же.

можно так навесить

//магия
	$(document).ready(function() {
		$('#linkst_block1').css("display","none");
		$('#linkstyle1 a').click(function() {
			$('#linkst_block1').toggle("slow");
		});
	});

<p id="linkstyle1" class="linkst"><a href="java script:void(0)">Рекламный щит</a></p>
<div id="linkst_block1"><p>Рекламный щит – самый традиционный и самый дешевый вид наружной рекламы. Именно он стал неотъемлемой частью пейзажа российских городов.На сегодняшний день наиболее распространенным форматом рекламного щита является рекламный щит 3x6 м.</p></div>

Qwas · October 21, 2010

можно так навесить

Пардон не понял что куда) Сделай html страничку плз или полный код выложи

ну дак оно в любом случае будет колонку раздвигать же.

Раздвигать колонку - мне это и надо) другое дело что спойлер при открытии получается впихнутым в первую ичейку) а мне надо чтобы на 100% растягивалось прямо под всеми пунктами

Вот пофотошопил желаемый результат

Edited October 21, 2010 by Qwas

npofopr · October 22, 2010

ну сделать строку, объединить все ячейки по горизонтали.

и делать блоки, которые появляются при клике на ссылку.

Зачем страницу. все понятно куда что.

скрипт в шапку, абзац в тело.

<head>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#linkst_block1').css("display","none");
		$('#linkstyle1 a').click(function() {
		$('#linkst_block1').toggle("slow");
		});
	});
</script>
</head>

<body>
<p id="linkstyle1" class="linkst"><a href="java script:void(0)">Рекламный щит</a></p>
<div id="linkst_block1"><p>Рекламный щит – самый традиционный и самый дешевый вид наружной рекламы. Именно он стал неотъемлемой частью пейзажа российских городов.На сегодняшний день наиболее распространенным форматом рекламного щита является рекламный щит 3x6 м.</p></div>
</body>

вообще в гугле много вариаций появления текста по нажатию ссылки.

rus · October 22, 2010

вот тут посмотри и вытащи оттуда код.

Sign In

Реализайция спойлера в таблице

Question

Qwas

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

Qwas

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information