Главная » Функционал » Нестандартные решения » Плавное сворачивание/разворачивание области

Плавное сворачивание/разворачивание области

12.08.2009 в 12:28
Автор: G-XPert

Начнём...

Ну для начала как обещал пример:

Свернуть/Развернуть область

Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.Текст. Текст.
Текст.Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст.

Делается это не сложно:

1.  Делаем ссылку, при нажатии на которую будет сворачиваться/разворачиваться заданная область:
Quote
<a onclick="$('#name').slideToggle('slow');" href="javascript://">Свернуть/Развернуть</a>

Где name - уникальный id.
2. Теперь саму область:
Code
<div id="name">Код области</div>

Где name - тот самый уникальный id, должен совпадать c id который был в шаге 1.
Где Код области ставим код области, которая и будет при нажатии на ссылку сворачиваться/разворачиваться.

JQ, Разворачивание, Сворачивание, javascript, jquery, Скрытая информация, Скрытые данные, JS


Рейтинг: 28  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 24745          Комментариев: 31

Похожие инструкции

20.04.2014 в 16:54      0  

Большое спасибо. То что нужно.
Подскажите, что сделать, чтобы, если пользователь свернул область после перезагрузки страницы так и оставалось закрытым поле.
03.05.2015 в 12:34      0  

Можно использовать куки.
При нажатии на кнопку "закрыть" - добавлять в куки значение определённое, при загрузке страницы проверять, если значение в куках найдено - автоматом прятать поле. Если пользователь нажал "открыть" - стираем значение из куков.
Это совсем не сложно, вот вам немного информации: http://jquery.page2page.ru/index.p...._cookie
18.02.2014 в 19:07      0  

Как можно сделать в меню в шаблоне с сохранением стиля?
29.01.2014 в 19:03      0  

Вставпенный код области является кодом отдельной страницы.Со временем код самой страницы изменяется.Можно ли прописать вставленный код так,чтобы он синхронизировлся с изменениями страницы автоматически?
12.12.2013 в 20:34      0  

Подскажите.
у меня несколько ссылок с развертыванием, и как сделать чтобы при нажатии на одну закрытую ссылку она открывалась, а уже открытая закрывалась.
28.11.2013 в 16:02      0  

Я новичок-новичок, уж простите... Ссылку создать получилось, а вот где создать саму область (т.е. текст который должен раскрыться), как узнать (или создать?) этот уникальный id и код области? И куда вставить код из п.2?
28.11.2013 в 19:08      0  

Уникальный id придумаете сами, главное чтобы он совпадал в п.1 и п.2
Саму область, можно на странице, но лучше чтобы не путаться, прямо под ссылкой. например
Код

<a onclick="$('#ura').slideToggle('slow');" href="javascript://">Свернуть/Развернуть</a>
<div id="ura">Здесь пишем всё что хотим скрыть/открыть</div>

Проще некуда )))
29.11.2013 в 09:53      0  

Ай, шайтан! Получилось! biggrin Спасибо! Еще нюансик - при открытии странички изначально текст, который должен быть свернут, сразу развернут. Нужно, чтобы он сначала был свернут.
НАшла здесь же, спасибо Amrita.
29.11.2013 в 17:09      0  

biggrin Ниже EgorKruglikov уже отвечал на этот вопрос
Код
<a onclick="$('#name').slideToggle('slow');" href="javascript://">Свернуть/Развернуть</a><div id="name" style="display:none">Код области</div>
13.10.2013 в 12:30      0  

Добрый день!
Засунул в эту форму почтовую форму.
А как сделать, чтобы после нажатия клавиши "Отправить", область обратно закрывалась?
14.10.2013 в 22:35      +1  

Здравствуйте, Вам необходимо присвоить id/class кнопке в форме обратной связи (изначальный код кнопки имеет вид: <input type="button">), после чего добавить на страницу, где установлена форма, скрипт вида:
Цитата
<script type="text/javascript">
$('input[type="button"]').click(function() {
$('#name').slideToggle('slow');
});
</script>

input[type="button"] необходимо заменить на id/class, присвоенной кнопке.
20.10.2013 в 18:40      0  

EgorKruglikov, добрый день!

В шаблоне на странице стоит такой код:


Почтовая форма имеет вид:


Пробовал сделать как Вы сказали:

на странице:

в почтовой форме:

Но ничего не заработало. В чём ошибка?
21.10.2013 в 09:27      0  

Здравствуйте, Tyzemec. В случае Вами указанном, попробуйте заменить часть кода:
Цитата
$('forma_obr_sviazi').click(function() {

На вариант:
Цитата
$('#forma_obr_sviazi').click(function() {
21.10.2013 в 13:07      0  

Благодарю, всё заработало)
01.07.2013 в 01:56      0  

Спасибо! Давно искала такой скрипт! Небольшой и полезный.
13.06.2013 в 17:52      0  

Добрый день!
На сколько я знаю, то что находится в "коде области" не индексируется поисковиками, так как это скрипт, правильно же?
07.05.2013 в 14:48      0  

всё работает. вот только хотелось-бы, что-бы вместо Свернуть/Развернуть область было при закрытой области Открыть, а соответственно при открытой - Закрыть.
нигде не могу найти как это сделать!
если кто знает - напишите пожалуйста! smile
08.05.2013 в 12:10      0  

Здравствуйте,
Код
<a onclick="$('#name').slideToggle('slow');" href="javascript://">Свернуть/Развернуть</a><div id="name" style="display:none">Код области</div>
08.05.2013 в 14:02      0  

smile привет
нет, я имел ввиду, чтоб менялось само слово. т.е. не было одного, например Свернуть/Развернуть область, а было, допустим, два - Открыть и Закрыть, в зависимости от того, открыта или закрыта область.
10.05.2013 в 09:11      +2  

Пример:
Код
<a onclick="$('#one').slideToggle('slow');$('#two').slideToggle('slow');$('#name').slideToggle('slow');" href="javascript://" id="two">Свернуть</a><a style="display:none" onclick="$('#one').slideToggle('slow');$('#two').slideToggle('slow');$('#name').slideToggle('slow');" id="one" href="javascript://">Развернуть</a>
<div id="name">Код области</div>
11.05.2013 в 15:51      0  

спасибо! это то, что надо! smile
18.06.2012 в 11:32      +2  

А как сделать чтобы изначально область была свёрнута, а при нажатии разворачивалась, а не наоборот? happy

О, всё нашёл в интернете, к диву прописать стиль: style="display:none;"
07.08.2012 в 15:17      +2  

я маленько эксперементировал,вместо onclick вставил onMouseOver
теперь при наведении мышкой на надпись Свернуть/Развернуть блок открывается и закрывается.
18.01.2013 в 15:51      -1  

Опишите подробней пожалуйста куда именно вставить
18.01.2013 в 17:52      0  

Как вы представляете ответ на ваш вопрос? В необходимое место вставляйте: в шаблон; в материал; сообщением на форум (должны быть включены для группы хтмл теги).
29.01.2013 в 10:03      0  

на примере опросов:
<a onmouseover="$('#name3').slideToggle('slow');" href="javascript://">Свернуть/Развернуть</a>
<div id="name3" style="display:none;">$POLL$</div>
блок постоянно свёрнут,при наведении разворачивается,
меню категорий:

<a onmouseover="$('#name1').slideToggle('slow');" href="javascript://">Свернуть/Развернуть</a>
<div id="name1" style=" display:none;">$CATEGORIES$</div>

блок опросов полностью:
<!-- <block7> -->
<table border="0" cellpadding="2" cellspacing="1" width="200">
<tbody><tr><td><b>» опросы<!-- <bt> --><!--<s5351>--><!--</s>--><!-- </bt> --></b></td></tr>
<tr><td><!-- <bc> --><span style="font-family: Georgia; color: rgb(0, 100, 0);"><i>

<a onmouseover="$('#name3').slideToggle('slow');" href="javascript://">Свернуть/Развернуть</a><hr>
<div id="name3" style="display:none;">$POLL$</div>
</i></span><!-- </bc> --></td></tr>
</tbody></table><br>
<!-- </block7> -->

дальше сами.......
1 2 »