Jump to content
  • 0

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

Qwas

Asked by Qwas,

 Share

Question

Qwas Explorer

Qwas

Posted
Posted (edited)

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

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

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

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

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

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

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

Edited by Qwas
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
npofopr Trainee

npofopr

Posted
Posted

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

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

//магия
	$(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>

Link to comment
Share on other sites
  • 0
Qwas Explorer

Qwas

Posted
  • Author
Posted (edited)
можно так навесить

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

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

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

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

bLzUKDlaP2.jpg

Edited by Qwas
Link to comment
Share on other sites
  • 0
npofopr Trainee

npofopr

Posted
Posted

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

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

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

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

<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>

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept