Раскрывающийся блок
Инструкция о том, как сделать раскрывающийся по клику блок.
Нажмите здесь для детальной информации
Всё очень просто! Достаточно:
- Создать новый div с уникальным id , например, id=»my_div» .
- Создать новую ссылку (кнопку) и задать id как у блока, только с префиксом sw_ , в данном случае: id=»sw_my_div» .
- Добавить на ссылку класс cm-combination .
Пример. Создайте HTML блок с кодом:
Я вас люблю, хоть и бешусь,
Хоть это труд и стыд напрасный,
И в этой глупости несчастной
У ваших ног я признаюсь!
Иконки переключатели или «Вкл/Выкл»
Можно использовать иконки или кнопки «Вкл/Выкл», для этого используются id для ссылок:
- on_[id_блока] — открыть
- off_[id_блока] — закрыть
[id_блока] — уникальный id блока который нужно открывать/закрывать
Пример. Два раскрывающихся блока. Один с помощью иконки, второй текстовыми ссылками. Также, возможно использовать изображения
Без вас мне скучно, — я зеваю;
При вас мне грустно, — я терплю;
И, мочи нет, сказать желаю,
Мой ангел, как я вас люблю!
Выкл. Когда я слышу из гостиной
Ваш легкий шаг, иль платья сум,
Иль голос девственный, невинный,
Я вдруг теряю весь свой ум.
Одновременное использование нескольких переключателей
$block.block_id>" больше $block.block_id>" cm-combinations"> $block.block_id>" cm-combinations hidden"> $block.block_id>" > Вы улыбнетесь — мне отрада;
Вы отвернетесь — мне тоска;
За день мучения — награда
Мне ваша бледная рука.
— id блока, доступен в SMARTY блоках.
Содержание
- Администратору
- Русская версия CS-Cart
- Разработка и модификация
- Инструменты и шпаргалки
- Режим разработки и отображение ошибок
- Работа с базой данных MySQL. Плейсхолдеры и функции
- addon.xml — главный файла модуля
- Расширение функционала ядра с помощью хуков
- Шаблоны и блоки
- Pop-up (вплывающие окна)
- Раскрывающийся блок
- Часто задаваемые вопросы
Сейчас
- Раскрывающийся блок
- Нажмите здесь для детальной информации
- Иконки переключатели или «Вкл/Выкл»
- Одновременное использование нескольких переключателей
Возможно ли создать раскрывающийся блок только на CSS?
Если нельзя, то каким образом сделать вот такой раскрывающийся список, как на картинке (в действиии по ссылке можно посмотреть)
- Вопрос задан более трёх лет назад
- 13187 просмотров
Комментировать
Решения вопроса 1
50% ответа в правильном вопросе. Остальное мануал.
Заголовок спойлера
Текст спойлераОтвет написан более трёх лет назад
Создать кнопку и раскрывающийся блок
Можно как то в инспекторе посмотреть стили кнопки которая при клике наводится, не ясно где появляются.
Когда выделяешь этот блок там в инспекторе рядом надпис ev это что означает событие javascript?Дополнительный блок это нужно его скрытым делать, потом при нажатии на кнопку делать запрос аякс и вставлять данные в блок или сразу вывести только сделать блок скрытым.
Не понятно как такое сделать чтобы по кнопке открывалось Jquery наверно нужен.
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Раскрывающийся фрейм по нажатию на кнопку
Помогите пожалуйста, как можно реализовать такую идею, в исходном положении фрейм как бы пустой.Раскрывающийся блок
Здравствуйте. Мне нужно сделать раскрывающийся блок. Изначально его высота, например, 50px, по.раскрывающийся блок
допустим у нас есть один большой блок, куда записываются (от 0 до 50) небольшие строчки текста.Анимированный раскрывающийся блок
Здравствуйте. Хочу сделать календарь с заметками. Заметки отображаются на самих ячейках, но не.Богатый духовно
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,057right sector, это вам в раздел jquery идти надо, а кнопка это все то же самое что я вам писал раньше. это такой ШРИФТ, и я вам его уже СКИДЫВАЛ ранее.
2964 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,855
Записей в блоге: 11Сообщение было отмечено МыЗаМир как решение
Решение
boilzzz, это же просто спойлер, его можно сделать и на css без jQuery. Вот пример с хабра:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>Cпойлер средствами css/title> style> .spoiler > input + .box > blockquote < display: none; >.spoiler > input:checked + .box > blockquote < display: block; >.spoiler > input[type="checkbox"] < cursor: pointer; border-color:transparent!important; border-style:none!important; background:transparent none!important; position:relative;z-index:1; margin:-10px 0 -30px -230px; >.spoiler > input[type="checkbox"]:focus < outline:none; /* Убираем обводку в ИЕ8 при "фокусе" */ >.spoiler span.close, .spoiler span.open < padding-left:22px; color: #00f!important; text-decoration: underline; >.spoiler > input + .box > span.close < display: none; >.spoiler > input:checked + .box > span.close < background: url(http://st0.bbcorp.ru/img/minus.png) 4px 60% no-repeat; display: inline; >.spoiler > input:checked + .box > span.open < display: none; >.spoiler > input + .box > span.open < background: url(http://st0.bbcorp.ru/img/plus.png) 4px 60% no-repeat; display: inline; >.spoiler blockquote, .spoiler < padding:1em; border-radius:15px; -webkit-border-radius:15px; -khtml-border-radius:15px; -moz-border-radius:15px; -o-border-radius:15px; -ms-border-radius:15px; >.spoiler < overflow-x:hidden; box-shadow: 0px 3px 8px #808080; border:#E5E5E5 solid 2px; -webkit-box-shadow:0px 3px 8px #808080; -khtml-box-shadow:0px 3px 8px #808080; -moz-box-shadow:0px 3px 8px #808080; -ms-box-shadow:0px 3px 8px #808080; >.spoiler blockquote < margin-top:12px; min-height: 23px; border:#CDCDCD 2px dashed; >/style>
Похожие публикации:
- Инструменты и шпаргалки