PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

что-то на подобии аккордеона

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)

Страниц (1): [1]

Без описания

Поиск в теме | Версия для печати

alexiy	Отправлено: 03 Февраля, 2012 - 22:13:45
Посетитель Покинул форум Сообщений всего: 483 Дата рег-ции: Янв. 2011 Помог: 6 раз(а)	CODE (html): скопировать код в буфер обмена <h2> <p>1</p> </h2> <h2> <p>1</p> </h2> <h2> <p>1</p> </h2> <h2> <p>1</p> </h2> <h2> <p>1</p> </h2> как сделать так, что бы при загрузке страницы, теги "p" не были бы видны, а при нажатии на тэг H2 открывался соответствующий ему тег "P"

IllusionMH	Отправлено: 03 Февраля, 2012 - 22:29:23
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	alexiy, а остальные скрывались или просто открывался-закрывался еще один?

alexiy	Отправлено: 03 Февраля, 2012 - 22:31:42
Посетитель Покинул форум Сообщений всего: 483 Дата рег-ции: Янв. 2011 Помог: 6 раз(а)	там надо так, нажал на конкретный h2 и открылся его тег "p" с остальными ничег не происходит

Саныч	Отправлено: 03 Февраля, 2012 - 23:05:59
Участник Покинул форум Сообщений всего: 1365 Дата рег-ции: Июль 2010 Откуда: Украина, Запорожье Помог: 62 раз(а)	CODE (html): скопировать код в буфер обмена <style> h2 > p {display: none} </style> CODE (javascript): скопировать код в буфер обмена window.onload = function() { var els = document.getElementsByTagName('H2'); for (var i in els) els[i].onclick = function() { this.getElementsByTagName('P')[0].style.display = 'block'; } } На jQuery поменьше кода будет CODE (javascript): скопировать код в буфер обмена $(function() { $("h2").click(function() { $(this).children("p").show(); }); }); ----- Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс

IllusionMH	Отправлено: 03 Февраля, 2012 - 23:41:31
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	Вообще-то элемент p нельзя помещать в заголовок h2 Вот мой вариант решения Спойлер (Отобразить) CODE (html): скопировать код в буфер обмена <div id="accordion"> <h2>1</h2> <p>11</p> <h2>2</h2> <p>22</p> <h2>3</h2> <p>33</p> <h2>4</h2> <p>44</p> </div> Спойлер (Отобразить) CODE (javascript): скопировать код в буфер обмена document.getElementById("accordion").onclick = function(e) { var e = e \|\| windows.event, target = e.target \|\| e.srcElement, p; if(target.tagName.toLowerCase() !== "h2") { return; } p = target.nextSibling; if(p.nodeType !== 1) { p = p.nextSibling; } p.style.display = "block"; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); }; На jQuery естественно короче) Еще круче можно сделать через чекбокс. Если интересно - напишу. А вообще - ждем появления элемента details во всех браузерах (Отредактировано автором: 03 Февраля, 2012 - 23:50:57)

alexiy	Отправлено: 04 Февраля, 2012 - 00:31:57
Посетитель Покинул форум Сообщений всего: 483 Дата рег-ции: Янв. 2011 Помог: 6 раз(а)	IllusionMH пишет: Вообще-то элемент p нельзя помещать в заголовок h2 Вот мой вариант решения Спойлер (Отобразить) CODE (html): скопировать код в буфер обмена <div id="accordion"> <h2>1</h2> <p>11</p> <h2>2</h2> <p>22</p> <h2>3</h2> <p>33</p> <h2>4</h2> <p>44</p> </div> Спойлер (Отобразить) CODE (javascript): скопировать код в буфер обмена document.getElementById("accordion").onclick = function(e) { var e = e \|\| windows.event, target = e.target \|\| e.srcElement, p; if(target.tagName.toLowerCase() !== "h2") { return; } p = target.nextSibling; if(p.nodeType !== 1) { p = p.nextSibling; } p.style.display = "block"; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); }; На jQuery естественно короче) Еще круче можно сделать через чекбокс. Если интересно - напишу. А вообще - ждем появления элемента details во всех браузерах Конечно же интересно

IllusionMH	Отправлено: 04 Февраля, 2012 - 01:07:53
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	CODE (html): скопировать код в буфер обмена <label for="chk1">1</label><input type="checkbox" id="chk1" /> <p>11</p> <label for="chk2">2</label><br /> <input type="checkbox" id="chk2" /> <p>22</p> <label for="chk3">3</label><br /> <input type="checkbox" id="chk3" /> <p>33</p> <label for="chk4">4</label><br /> <input type="checkbox" id="chk4" /> <p>44</p> CODE (CSS): скопировать код в буфер обмена input[type="checkbox"] { position: absolute; /display: none; почему-то срабатывает не везде/ left: -100%; /первый пришедший в голову вариант/ /clip: rect(0px, 0px, 0px, 0px); вариант использующийся на dabblet.com/ } input[type="checkbox"] + p { display: none; } input[type="checkbox"]:checked + p { display: block; } Подсмотрел где-то на этом сайте Stuff you can do with the “Checkbox Hack” by: Chris Coyier

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« JavaScript & VBScript »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.