Плавно раскрывающийся блок в HTML

Общение на любые темы
Ответить
Сообщение
Автор
Аватара пользователя
0003Spi
Сержант
Сержант
Сообщения: 45
Зарегистрирован: 24.08.2009
Откуда: Хабаровск

#1 Сообщение 09.03.2011, 15:53

Как можно сделать плавно раскрывающийся список типа спойлера?
Пример
1)Тут текст.
2)Тут текст.
3)Тут текст.
4)...
...
Как споилер, только плавно и желательно в виде простого текста или ссылки. Я знаю, что это делается через div тег, и по мимо просто HTML используется ещё и CSS, но может ли кто нибудь по подробнее рассказать как это сделать?
Изображение

Аватара пользователя
NiGHt-LEshiY
Полковник
Полковник
Сообщения: 10258
Зарегистрирован: 13.06.2008
Откуда: Россия
Благодарил (а): 752 раза
Поблагодарили: 2667 раз
Контактная информация:

#2 Сообщение 09.03.2011, 16:01

<div> с нужным содержимым, вызывающий функцию Show при клике. Функция Show, собственно, раскрывает элемент.
Понадобится Javascipt, можно даже jQuery.
Кодекс поведения участников сообщества — обязательно к прочтению.
Просьба присылать сообщения об ошибках в ЛС.

Аватара пользователя
0003Spi
Сержант
Сержант
Сообщения: 45
Зарегистрирован: 24.08.2009
Откуда: Хабаровск

#3 Сообщение 10.03.2011, 03:20

А можно по подробнее, если не трудно, можете привести пример?
Изображение

Morfin
Лейтенант
Лейтенант
Сообщения: 237
Зарегистрирован: 19.10.2007
Поблагодарили: 1 раз

#4 Сообщение 10.03.2011, 11:07

Код: Выделить всё

$('#element').click(function() {
  $('#otherelement').show('slow', function() {
    // Код callback-а
  });
});
примерно так
Последний раз редактировалось Morfin 10.03.2011, 11:19, всего редактировалось 1 раз.
Изображение

Аватара пользователя
0003Spi
Сержант
Сержант
Сообщения: 45
Зарегистрирован: 24.08.2009
Откуда: Хабаровск

#5 Сообщение 10.03.2011, 14:43

Благодарю, но вот ещё вопрос: как сделать так, что бы при наведении на текст курсором, сам курсор менял вид, а текст например подчёркивался или выделялся, но не через яваскрипт?
Знаю, что через <div onmouseover="" >Какой-то текст.</div> но как?
По отдельности, через style="" всё просто, но, что бы именно при наведении на него курсора, кто подскажет?
Изображение

Аватара пользователя
0003Spi
Сержант
Сержант
Сообщения: 45
Зарегистрирован: 24.08.2009
Откуда: Хабаровск

#6 Сообщение 11.03.2011, 04:50

Всё, разобрался, там не через onmouseover, в CSS файле поставил изменение курсора и на странице сделал через class="название функции в CSS". Теперь мне нужно, что бы при наведении курсора на этот текст, текст менял цвет, я пробовал тем же путём, но текст красится сразу, а через onmouseover он не хочет, подскажите как сделать так, что бы текст касился при наведении на него курсора?
Изображение

Аватара пользователя
0003Spi
Сержант
Сержант
Сообщения: 45
Зарегистрирован: 24.08.2009
Откуда: Хабаровск

#7 Сообщение 12.03.2011, 09:06

Всё, разобрался, сделал всё как нужно.
Изображение

Ответить