Выпадающий текст на jquery

Возникла необходимость делать блоки текста, выпадающие при нажатии на кнопку подробнее, причем чтобы задавать их можно было только стилем (редактируя текст в wysiwyg редакторе).

Смотрим и комментируем решение:

 

<HTML> 
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
</HEAD>

<BODY>
	<p>some one text</p>
	<div class="toggling">some another text</div>
	<p>and some more text</p>
<BODY>
</HTML>

 

И script.js

 

$(function(){
	$(".toggling").hide().before('<div><a href="#null" class="toggling-button-more">Подробнее</a></div>').append('<div><a href="#null" class="toggling-button-less">Скрыть</a></div>');
	
	$('.toggling-button-more').click(function(){
		$(this).parent().next().slideDown();
		return false;
	});
	
	$('.toggling-button-less').click(function(){
		$(this).parent().parent().slideUp();
		return false;
	});
});

И так, после выполнения кода на странице скрываются все toggling блоки и вместо них появляются кнопки подробнее. При нажатии на кнопку подробнее раскрывается блок, внизу которого кнопка скрыть. При нажатии на скрыть блок скрывается. Приемщество данного решения состоит в том, что если у пользователей отключен js по какой-то причине, то все блоки будут видимые и не будет никаких лишних кнопок.

Пример решения на странице сайта БФ "Мир моей мечты" (Проект "Доброе дело").

6 comments so far:

Анонимный says: Харебол! Кнопка "подробнее"

Харебол! Кнопка "подробнее" так и остается посреди текста или я неправильно что-то сделала?

skua says: Да, в данном случае кнопка

Да, в данном случае кнопка остается, однако можно сделать и чтобы скрывалась, дописав в нужном месте hide()

Анонимный says: спасибо. )))) в script.js

спасибо.
))))
в script.js небольшая опечатка < /dvi> вместо < /div>

skua says: Благодарю! Исправил.

Благодарю! Исправил.

Анонимный says: Как сделать чтобы было два

Как сделать чтобы было два варианта 1-Читать и 2-Смотреть (для видео). Чтобы можно было легко ими манипулировать.

skua says: Если я правильно понимаю

Если я правильно понимаю задачу, то нужно сделать еще стиль например toggling-video и далее написать подходящий скрипт для открытия видео.

Отправить комментарий

  • HTML-теги запрещены
  • Строки и параграфы переносятся автоматически.

Подробнее о форматировании

Image CAPTCHA