6 / 6 / 3
Регистрация: 03.07.2010
Сообщений: 222

Спойлер!!!

31.05.2011, 10:13. Показов 2786. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Привет всем!!!!

Как сделать спойлер такого вида
Тут название
Тут текст
????
Просто делаю страницу в HTML, а как спойлер сделать ненаю!!!!!
Может вы поможете=)
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
31.05.2011, 10:13
Ответы с готовыми решениями:

Спойлер
Как сделать чтоб он был по вертикали а не горизонтали, тоисть на подобии дерева <a...

Спойлер
Как написать ссылку, по нажатию на которую под ней отобразится абзац текста, а по повторному клику исчезнет.

Спойлер
Всем доброго вечера, подскажите как сваять спойлер на js? Спойлер должен показывать скрытый текст(ссылки), но при нажатии, он должен...

2
 Аватар для Vovan-VE
13210 / 6599 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069
31.05.2011, 14:51
Лучший ответ Сообщение было отмечено сержи как решение

Решение

HTML5
1
2
3
4
5
6
7
8
9
<div class="spoiler">
    <div class="heading"><span class="b"></span>Тут название</div>
    <div class="content">Тут текст</div>
</div>
 
<div class="spoiler open">
    <div class="heading"><span class="b"></span>Тут название</div>
    <div class="content">Тут текст</div>
</div>
CSS
1
2
3
4
5
6
.spoiler {border:#ccc solid 1px; padding:0;}
.spoiler > .heading {margin:0; padding:2px 4px; backgound:#eee; font-weight:bold; cursor:pointer;}
.spoiler > .heading .b {display:inline-block; width:8px; height:8px; vertical-align:middle; background:#cfc;}
.spoiler.open > .heading .b {background:#fcc;}
.spoiler > .content {margin:0; border:#ccc solid; border-width:1px 0 0; padding:8px; display:none;}
.spoiler.open > .content {display:block;}
JavaScript
1
2
3
4
5
$(function(){
    $('.spoiler > .heading').click(function(){
        $(this).parent().toggleClass('open');
    });
});
Вместо зеленого и красного фона предполагаются изображения с плюсом и минусом соответственно.
0
6 / 6 / 3
Регистрация: 03.07.2010
Сообщений: 222
01.06.2011, 19:25  [ТС]
Цитата Сообщение от Vovan-VE Посмотреть сообщение
HTML5
1
2
3
4
5
6
7
8
<div class="spoiler">
     <div class="heading"><span class="b"></span>Тут название</div>
     <div class="content">Тут текст</div>
</div>
<div class="spoiler open">
      <div class="heading"><span class="b"></span>Тут название</div>
      <div class="content">Тут текст</div>
</div>
А его просто вставить и все????
А то просто у меня только высвечивает: Тут название и Тут текст=((
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
01.06.2011, 19:25
Помогаю со студенческими работами здесь

Спойлер на JS
Есть два спойлера: function ShowOrHide(a){var...

Спойлер
Как с помощью js/jquerry сделать спойлер? Нужно заспойлерить данные строки (за исключением заголовка :D )

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

Iframe в спойлер
Здравствуйте форумчане. Подскажите пожалуйста, возможно ли сделать спойлер таким образом, чтобы iframe загружался только при открытии...

Вкладки+спойлер
Здравствуйте,нужна помощь. Движок сайта DLE 10.0 Решил сделать красивые вкладки для сайта, все подключил, выровнял, вкладки заработали...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

Новые блоги и статьи
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда
anaschu 31.03.2026
В прикрепленном документе раздумья о том, как можно поменять модель в будущем
10 пpимет, которые всегда сбываются
Maks 31.03.2026
1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .
Перемещение выделенных строк ТЧ из одного документа в другой
Maks 31.03.2026
Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .
Functional First Web Framework Suave
DevAlt 30.03.2026
Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа
Maks 29.03.2026
Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .
Настройка движения справочника по регистру сведений
Maks 29.03.2026
Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .
Автозаполнение реквизита при выборе элемента справочника
Maks 27.03.2026
Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
Сумматор с применением элементов трёх состояний.
Hrethgir 26.03.2026
Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru