Скрипт сворачивания/разворачивания

D
На сайте с 28.06.2008
Offline
1101
2809

Как сделать чтобы изначально этот скрипт был в свернутом состоянии?

<a onclick="myShow(); return false;" href="#">[+]</a>

<a onclick="myHide(); return false;" href="#">[-]</a>
<div id="myBlock">
{akoforms=10}
</div>

<script type="text/javascript">
function myShow() {
document.getElementById('myBlock').style.display = "block";
}
function myHide() {
document.getElementById('myBlock').style.display = "none";
}
</script>
firefox19
На сайте с 05.11.2009
Offline
34
#1

#myBlock {

display: none;

}

Ваши идеи - наша работа (http://yaweb.ru) Продам Сайт агентства недвижимости (/ru/forum/561489)
D
На сайте с 28.06.2008
Offline
1101
#2

<div id="myBlock" style="display: none;">

VID01
На сайте с 29.01.2010
Offline
84
#3
Как сделать чтобы изначально этот скрипт был в свернутом состоянии?

Вызвать ф-ю в конце myHide();

<script type="text/javascript">

function myShow() {

document.getElementById('myBlock').style.display = "block";

}

function myHide() {

document.getElementById('myBlock').style.display = "none";

}

myHide();

</script>

Пока писал, уже два ответа последовало..

D
На сайте с 28.06.2008
Offline
1101
#4

А может сюда еще можно добавить плавность открытия/закрытия?

D
На сайте с 09.07.2009
Offline
79
#5

Можно.

Правда, с помощью чистого яваскрипта не знаю как.

Можно на jquery:

http://jquery-docs.ru/Effects/show/#speedcallback

[Удален]
#6

пользуй jquery accordion

C
На сайте с 04.02.2005
Offline
277
#7

плавное разворочавание/сворачивание:

height =0;

цикл

{

document.getElementById('myBlock').style.height = height +'px';

height ++;

}

Brand from Amber
На сайте с 18.08.2007
Offline
291
#8

klaustrafob, digwnews, поколение жквери, блин. =(

Dram,


<script type="text/javascript">
function n(t) {
if (document.all) {
return t.innerText;
} else {
return t.textContent;
}
}
</script>

Тут визуализация кода.
<A onclick="var tmp=n(this); if (tmp == '[+]'){this.innerHTML = '[-]'; document.getElementById('myBlock').style.display = '';} else {this.innerHTML = '[+]'; document.getElementById('myBlock').style.display = 'none';}; return false;" href="javascript: void(0);">[+]</A>

<div id="myBlock" style="display:none">
{akoforms=10}
</div>

Тут визуализация кода.

Лучший способ понять что-то самому - объяснить это другому.
D
На сайте с 28.06.2008
Offline
1101
#9

Этот скрипт чем то лучше исходного?

LEOnidUKG
На сайте с 25.11.2006
Offline
1723
#10

ээээ...

Мастадонты JS ёмаё.

Разворачиванием и сворачивание это простейшая функция 2-х строчек:


function showhide(id){var e=document.getElementById(id);if( e ) e.style.display = e.style.display ? "" : "none";}

Работает так:


<a onclick="showhide('myBlock'); showhide('minus'); showhide('plus'); return false;" id="plus" href="#">[+]</a>
<a onclick="showhide('myBlock'); showhide('minus'); showhide('plus'); return false;" id="minus" style="display: none;" href="#">[-]</a>
<div id="myBlock" style="display: none;">
{akoforms=10}
</div>

Фишка в том, что скрипт сам определяет свёрнутый ли латок или нет. Поэтому мы просто дублируем использование функций и не замарачиваемся на том, что у нас скрыто, а что показано.

Насчёт плавности, тут тоже можно покопаться, но если на сайте уже используется Jquery, то конечно через него быстрее, если же нет, то подключать эти тонны JS для такой просто задачи не вижу смысла.

✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE ✅ Качественное и рабочее размещение SEO статей СНГ и Бурж: https://getmanylinks.ru/

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