19 января 2008 ~ 41 Комментарий

Делаем раскрывающиеся блоки

hfhfgh

Самое простое и маленькое JavaScript решение для раздвижных блоков, никаких громоздких библиотек — только самое необходимое.

Это «самое необходимое» занимает всего ничего — 3 килобайта, просто смешной размер, а прием на 5 баллов :-)

Убедительно прошу всех читателей поучаствовать в опросе! ;-)

Пример раскрывающихся блоков

В архиве прилагается упакованная версия скрипта размером в 2 килобайта, но у меня она глючила, и по умолчанию я подключил обычную версию.

Скачать пример «раскрывающихся блоков»

Посетить источник

41 Комментарий для “Делаем раскрывающиеся блоки”

  1. scvorec 19 апреля 2008 at 18:28 Permalink

    спасибо, пригодится.

  2. Vyazovoi Pavel 19 апреля 2008 at 18:36 Permalink

    Симпатично, даже захотелось где-нибудь приткнуть

  3. Tod 19 апреля 2008 at 19:59 Permalink

    Вот это выглядит классно! Уже судорожно думаю куда бы добавить:)

  4. nooze 19 апреля 2008 at 21:51 Permalink

    В примере – «Терий блок» :)
    А так спасибо, искал что-то подобное, все реально громоздкое и перенавороченное

  5. [v0r0b] 20 апреля 2008 at 0:36 Permalink

    круто
    thx

  6. Aivean 20 апреля 2008 at 4:51 Permalink

    Это полезно только когда не используешь библиотеки для других целей. Например, у меня очень много красивостей завязано на jquery, логично, что и для подобного эффекта я использую её.

  7. Я собственной персоной 20 апреля 2008 at 9:55 Permalink

    В примере – «Терий блок» :)
    А так спасибо, искал что-то подобное, все реально громоздкое и перенавороченное

    Я в курсе, опечатка :-(

  8. Vlad Ossipov 20 апреля 2008 at 18:30 Permalink

    Спасибо большое! Сейчас буду прикручивать! Как раз искал такие штуки!

  9. Soider 21 апреля 2008 at 15:10 Permalink

    А как сделать, чтобы третий блок не скрывался, когда открыты все три?

  10. 4ndre_0t 21 апреля 2008 at 15:20 Permalink

    да прикольн спс за сэмпл… )

  11. dimkins 23 апреля 2008 at 17:57 Permalink

    Штука забавная, только у тебя собственный сайт в ie6 смотрится убого.. в меню display:block поправь

  12. Children of koRn 25 июля 2008 at 19:18 Permalink

    как бы это дело к wp прикрутить…нипаняяяятна

  13. MasTy 20 августа 2008 at 10:29 Permalink

    Очень круто, но отступ очень большой от начала страницы.Как его убрать? Пример:
    http://betterwol.ru/?page_id=63&preview=true

  14. Chuuuvi 17 октября 2008 at 1:49 Permalink

    кто подскажет, как реализовать подобный эффект для таблиц?

    Есть таблица с информацией, каждая строка должна содержать ещё множество дополнительной информации, которая открывается подобным образом.

  15. dared 17 октября 2008 at 16:47 Permalink

    для таблиц можно и это попробовать http://www.stickmanlabs.com/accordion/
    только:
    это prototype
    и наверно надо будет слегка подпилить :) но настроек масса, да человек хорошо делает скрипты у него проверенные.
    или
    http://plugins.jquery.com/project/Plugins/category/54

  16. Chuuuvi 19 октября 2008 at 18:05 Permalink

    Огромное спасибо! То что нужно!

  17. air.1293 14 ноября 2008 at 12:15 Permalink

    [сначала немножечко офф-топа]
    Я торчу от множества оригинальних идей, которые предствлены в ентом блоге. Спасибо огромное автору блога! Я Ваш постоянный читатель на веки! Да и дизайн, и всьо оформление меня очень кроет! Так что действительно – респект. Все очень оригинально, легко воспринимается визуально. Просто балдеж для глаза, истомленного чтением в интернете.

    [теперь вопрос]
    А как сделать так или что надо изменить в скрипте, чтобы при загрузке страницы с раскрывающимися блоками они все находились в свернутом состоянии? (Сейчас первый блок всегда открыт при загрузке.) Спасибо тому, кто подскажет!

  18. air.1293 14 ноября 2008 at 12:29 Permalink

    [ржунимагу]
    Не прошло и 2-х минут, как я запостил вопросик – и меня самого осенило! Хотя я в скриптах ни бум-бум особенно, но прочитав у источника следущее:

    You will need to call the following function in your body onload where the first parameter is the div id of the accordion parent and the second tells the script which section to expand onload.
    ———————–
    slider.init(’slider’,1)
    ———————–

    меня осенило – я изменил единичку на нолик – и тепер блоки загружаются свернутыми.

    Теперь я мучаюсь со своими скудными познаниями в скриптологии, как сделать, чтобы работало больше чем три блока. А то вот добавляю 4-й енергоблок – и все блокируется. :(
    Спасибо тому, кто подскажет!

  19. air.1293 14 ноября 2008 at 13:29 Permalink

    [:-)]
    Просто какой-то монолог из самим собой! Нет, все-таки полезно в чем-то копаться, что-то разбирать. Уже все работает. Блоки добавляются (просто бил нев нимателен, – вот точно прямо как сейчас).
    Всем спасибо за моральную поддержку :)

    Ну, и еще раз – огромное спасибо писателю за его труды!!!
    Планирую еще некоторые фичи использовать зде опубликованные. Грех не использовать!

  20. air.1293 15 ноября 2008 at 13:36 Permalink

    кто подскажет, как реализовать подобный эффект для таблиц?

    Есть таблица с информацией, каждая строка должна содержать ещё множество дополнительной информации, которая открывается подобным образом.

    Случайно набрел на ооочень полезную штуку для меня в данное время. Какараз работаю над одним проєктом, где надо использовать большие (и шорокие к тому же) таблички. Сам искал за таким решением – и вот – еврика! – нашел!

    http://ru.wikipedia.org/wiki/%D0%92%D0%B8%D0%BA%D0%B8%D0%BF%D0%B5%D0%B4%D0%B8%D1%8F:%D0%A1%D0%B2%D0%BE%D1%80%D0%B0%D1%87%D0%B8%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%B5%D1%81%D1%8F_%D0%B1%D0%BB%D0%BE%D0%BA%D0%B8

  21. Вася 6 декабря 2008 at 20:05 Permalink

    Спасибо большое! Ураааааааа! Это то что надо! А там можно место текста поставить ссылки?

  22. Я собственной персоной 7 декабря 2008 at 12:31 Permalink

    Спасибо большое! Ураааааааа! Это то что надо! А там можно место текста поставить ссылки?

    Конечно можно.

  23. SLIDER.WEB 23 декабря 2008 at 7:37 Permalink

    Давно искал такую чтуку, но все что находил – было уж слишком заморочено и громоздко… А тут – то что надо!!! спс

  24. Kitich 29 декабря 2008 at 3:47 Permalink

    На основе Accordeon-меню? По крайней мере, по задумке похоже. Если не видели – поищите, сравните код по оптимальности )

  25. Kitich 29 декабря 2008 at 4:02 Permalink

    прошу прощения, ссылку не заметил. А в чем принципиальное различие? Accordion еще легче получается

    PS Что-то у Вас проблема с запоминанием юзера (мейл, сайт) – пришлось куки удалять, чтобы 2й комментарий написать

  26. Стас 29 декабря 2008 at 21:09 Permalink

    Очень!

  27. Konrad 21 января 2009 at 20:47 Permalink

    Спасибо, пригодится!

  28. Максим 25 февраля 2009 at 23:16 Permalink

    ОГРОМНОЕ СПАСИБО!!!! ДОЛГО ИСКАЛ!!!

  29. Сергей Ветер 28 февраля 2009 at 20:43 Permalink

    Хороший скрипт. Но есть проблемка — при больших размерах содержания блоков наблюдается неприятный эффект дрожания, например http://veter.info/iib/. Кто знает как это дело победить?
    Спасибо.

  30. SonRazuma 16 апреля 2009 at 15:05 Permalink

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

  31. SonRazuma 20 апреля 2009 at 21:31 Permalink

    Ой, была не внимательна! Всё получилось

  32. Bad_naruto 31 мая 2009 at 7:48 Permalink

    а как сделать тоже самое тока по вертикали… я хочу туда всю боковую панель запихнуть…ыыы)))

  33. Wolker 17 июля 2009 at 2:13 Permalink

    АВЕ!!! То что искал! Спс автор!!!)

  34. Anton Diaz 28 сентября 2009 at 1:01 Permalink

    Под развалюхи (IE6, к примеру) этот скрипт пашет? А еще: можно ли сделать без анимации?

  35. Anton Diaz 1 октября 2009 at 5:52 Permalink

    Всё, не надо)) Сделал другой скрипт

  36. Алексей 1 ноября 2009 at 23:55 Permalink

    А кроссбраузерное ли решение скажите… Везде работать будет?
    Ладно проверю отпишу

  37. lapwing 4 ноября 2009 at 1:14 Permalink

    Подскажите пожалуйста, как сделать так, чтобы это работало в цикле? У меня в блоке выводится короткая запись из БД и я хочу, чтобы при клике мыши на этой записи выводилась полная информация.

  38. MOPDOBOPOT 18 ноября 2009 at 16:10 Permalink

    Отлично, как раз искал такие блоки! Спасибо, уже прикручиваю :)

  39. FisheR 21 декабря 2009 at 3:37 Permalink

    Супер, то что нужно!!!

  40. Nikfire 7 февраля 2010 at 3:25 Permalink

    Вещь хорошая. Только вот больше чем 3 строки не получается ((

  41. Саша 23 февраля 2010 at 13:51 Permalink

    Привет, у меня такой вопрос. Я в java скриптах пока совсем не разбираюсь, поэтому хочу узнать. Как сделать чтобы в этом примере верхнее окошко при загрузке страницы было сразу свёрнутым?


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