выпадающий текст

Здесь можно общаться на любые темы не относящиеся к программе!
Убедительная просьба, вопросы по программе, что и как сделать, работе сайтов, задавать в соответствующих разделах, отсюда они будут просто удаляться!!!
Правила форума
1. Темы на форуме надо называть адекватно.
2. Убедительная просьба, вопросы по программе, что и как сделать, работе сайтов, задавать в соответствующих разделах, отсюда они будут просто удаляться!
Подробнее: Правила создания новых тем и ответов на существующие темы.
Ответить

Автор Темы
max

выпадающий текст

Сообщение max » 20 ноя 2012, 15:26

Подскажите как сделать такую штуку:
Например.
У нас есть длинный текст. Я хочу его расположить таким образом:

«Будет видно только начало текста. Абзац например. А потом в конце стоять крестик или еще что» +

Нажимая на который снизу будет открываться весь остальной текст документа. Что-то вроде группировки текста.

Реклама
Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5092
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Re: выпадающий текст

Сообщение anonimus » 20 ноя 2012, 16:20

html

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

<div class="spoil">
<div class="smallfont">Текст описания спойлера<input type="button" value="Развернуть" class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Свернуть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Развернуть'; }"/>
</div>
<div class="alt2">
<div style="display: none;">

текст внутри спойлера...

</div>
</div>
</div>


css

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

alt2{ margin: 0px;  padding: 6px;  border: 1px inset;}
smallfont{margin-bottom:2px;}
spoil{margin:10px; margin-top:5px;}
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Мои товары в магазине https://market.wysiwygwebbuilder.ru/anonimus.html
==============

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5092
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Re: выпадающий текст

Сообщение anonimus » 20 ноя 2012, 16:24

ещё пример

Код, представленный ниже, необходимо разместить между тегами <head></head>, если спойлер будет использоваться на нескольких страницах сайта. Если же нет, то достаточно просто вставить его в тело страницы где будет размещен спойлер (как сделано у меня на этой странице). Итак, код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div.spoiler div.name span").toggle(function(){
$(this).parent("div.name").parent("div.spoiler").children("div.text").show();
$(this).parent("div.name").parent("div.spoiler").css("backgroundPosition", " -15px 0");
},function(){
$(this).parent("div.name").parent("div.spoiler").children("div.text").hide();
$(this).parent("div.name").parent("div.spoiler").css("backgroundPosition", " 0 -15px");
});
});
</script>

А заголовок и тело спойлера размещается в следующем коде:

<div class= "spoiler">
<div class= "name"><span>Пример спойлера. Нажмите на ссылку…</span></div>
<div class= "text">Здесь находится текст, изображения или прочий контент.</div>
</div>

В принципе, уже все работает, однако не совсем так, как надо бы. Если вы просто вставите коды, представленные выше, то содержимое спойлера сразу будет открытым. Чтобы избавится от этого «недуга» необходимо в css (каскадная таблица стилей) добавить следующее:

div.spoiler div.text {
display: none;
}

Ну в принципе всё готово! Если вы всё сделали так, как здесь написано, спойлер будет работать без проблем. Если возникли проблемы, пишите!

Все необходимые параметры стилей, прописываем вот здесь:

div.spoiler div.name {список стилей;} //стили для заголовка
div.spoiler div.text {список стилей;} //стили для основного контента
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Мои товары в магазине https://market.wysiwygwebbuilder.ru/anonimus.html
==============

Аватара пользователя

Vika
Опытный
Опытный
Сообщения: 634
Зарегистрирован: 03 мар 2012, 03:01
Версия Web Builder: 9
Имя: Виктория
Контактная информация:

Re: выпадающий текст

Сообщение Vika » 20 ноя 2012, 16:40

anonimus, а если человек не знает куда эти твои коды прилепить и каким образом. Ты напиши как с помощью билдера это сделать.

Аватара пользователя

Конструкторщик
Эксперт
Эксперт
Сообщения: 1407
Зарегистрирован: 06 фев 2012, 14:01
Версия Web Builder: 12.0.2

Re: выпадающий текст

Сообщение Конструкторщик » 21 ноя 2012, 00:29

anonimus писал(а):ещё пример

В код пока не углублялся,но вопрос есть следующий:
Открывающийся спойлер будет сдвигать весь нижерасположенный контент вниз или же все таки он будет перекрывать собой нижестоящий контент?
Однажды купивший-будет платить все время.

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5092
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Re: выпадающий текст

Сообщение anonimus » 21 ноя 2012, 02:05

ребята, вы бы сами попробовали...
для тренировки не помешает
так постепенно всё сами научитесь делать
я вот сижу и вспоминаю как сам узнавал всё... вы будете смеяться, но я ничего не спрашивал, а пробовал сам или искал ответы в интернете
а когда я первый раз в жизни купил компьютер, а в то время 486 были в ходу, то я узнал две замечательные команды, а именно format c: и fdisk и с тех пор больше ничего не спрашивал почти :-):

ребята, приучайтесь всё сами делать и меньше спрашивать и тогда вы станете более профессиональны
конечно всё не узнать, но элементарные то вещи можно же самим попробовать!
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Мои товары в магазине https://market.wysiwygwebbuilder.ru/anonimus.html
==============

Аватара пользователя

Конструкторщик
Эксперт
Эксперт
Сообщения: 1407
Зарегистрирован: 06 фев 2012, 14:01
Версия Web Builder: 12.0.2

Re: выпадающий текст

Сообщение Конструкторщик » 21 ноя 2012, 04:16

anonimus писал(а):ребята, вы бы сами попробовали...
для тренировки не помешает
так постепенно всё сами научитесь делать
я вот сижу и вспоминаю как сам узнавал всё... вы будете смеяться, но я ничего не спрашивал, а пробовал сам или искал ответы в интернете
а когда я первый раз в жизни купил компьютер, а в то время 486 были в ходу, то я узнал две замечательные команды, а именно format c: и fdisk и с тех пор больше ничего не спрашивал почти :-):

ребята, приучайтесь всё сами делать и меньше спрашивать и тогда вы станете более профессиональны
конечно всё не узнать, но элементарные то вещи можно же самим попробовать!

Вот народ,спросишь как на ул.такую то пройти,а тебя жизни начинают учить.
Я ж не просто так спрашиваю,от нечего делать.
А таким спойлером (1 вариант),ты меня не удивил.Он (код) есть у меня.
Если такой спойлер установить и открыть его,он собой перекроет,а не сдвинет вниз весь контент.
Вот что меня интересует.
Чтобы при установке нескольких спойлеров,при открытии-все сдвигалось вниз-а не перекрывалось спойлером.
У меня установлен спойлер в самом верху сайта(http://bestsoft-v.narod.ru/index.html),а вот как таких несколько установить,чтобы они так же работали?
Никак не получается допетрить.
Однажды купивший-будет платить все время.

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5092
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Re: выпадающий текст

Сообщение anonimus » 21 ноя 2012, 14:23

Конструкторщик писал(а):
anonimus писал(а):ребята, вы бы сами попробовали...
для тренировки не помешает

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

вот же я сволота! :-)
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Мои товары в магазине https://market.wysiwygwebbuilder.ru/anonimus.html
==============

Аватара пользователя

Конструкторщик
Эксперт
Эксперт
Сообщения: 1407
Зарегистрирован: 06 фев 2012, 14:01
Версия Web Builder: 12.0.2

Re: выпадающий текст

Сообщение Конструкторщик » 21 ноя 2012, 16:29

anonimus писал(а):вот же я сволота! :-)

Ирония-иронией,а вот хотелось бы конкретики по заданному вопросу (по спойлеру),но повидимому ее не будет..
Однажды купивший-будет платить все время.

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5092
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Re: выпадающий текст

Сообщение anonimus » 21 ноя 2012, 17:39

Конструкторщик писал(а):
anonimus писал(а):вот же я сволота! :-)

Ирония-иронией,а вот хотелось бы конкретики по заданному вопросу (по спойлеру),но повидимому ее не будет..

я дал 2 варианта, а дальше копайте сами
я верю, что вы можете :-): хотя бы не сами делать, а читать и искать, а постепенно и сами начнёте думать как и что работает и как всё это менять под свои нужды

есть альтернативные варианты, без спойлера...
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Мои товары в магазине https://market.wysiwygwebbuilder.ru/anonimus.html
==============

Аватара пользователя

Alex
Admin
Admin
Сообщения: 3160
Зарегистрирован: 06 фев 2012, 00:03
Версия Web Builder: 14.2.2
Имя: Алексей
Контактная информация:

Re: выпадающий текст

Сообщение Alex » 21 ноя 2012, 19:40

anonimus, может ты не можешь объяснить - потому что сам не знаешь? Лично у меня такие ощущения....
Онлайн-магазин готовых решений
В личке принимаю, только по техническим вопросам! На вопросы по программе в личке не отвечаю!

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5092
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Re: выпадающий текст

Сообщение anonimus » 21 ноя 2012, 20:37

Alex писал(а): anonimus, может ты не можешь объяснить - потому что сам не знаешь? Лично у меня такие ощущения....

ну каждый ощущает так, как ему угодно, а не так как я хочу, а поэтому вы так и ощущаете
да и если я не знаю, то это не проблема, я узнаю и сделаю, но узнавать я буду сам, а не просить это сделать вот так

когда я что-то не знаю, а не знаю я очень многое, то я начинаю разбираться в вопросе, а не долбить всех вопросами
конечно ко всему это применить нельзя, но в данном случае можно и даже нужно
именно так людей заставляют учиться думать и разбираться в вопросах

кстати, моя дочка недавно ещё приходя с садика просила помочь снять с неё свитер или футболку, а теперь после слёз и слов, что она не умеет снимать этот противный свитер и после нескольких дней мучений она стала сама замечательно стаскивать с себя этот противный свитр и при этом не растягивая его и не пытаясь порвать :-):

кстати, она как-то тоже мне заявила, что мол я сам не умею снимать свитер, а поэтому не хочу ей помочь это сделать :-) :-) :-)
ситуация очень даже похожа...

ps Я не скажу, что члишком много кому-то тут помог, но помог
при этом люди сами могли всё легко решить, но делать этого не захотели
а знаете почему? потому что просто лень думать, лень пользоваться поиском
гораздо проще кого-то озадачить :-):

ребята, ну в самом деле, ну напрягите свои мозги и "оторвите попу от стула"!

Всем удачи!
и пожалуйста без обид, а тем более я никому не сказал ничего плохого :-):
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Мои товары в магазине https://market.wysiwygwebbuilder.ru/anonimus.html
==============

Аватара пользователя

Alex
Admin
Admin
Сообщения: 3160
Зарегистрирован: 06 фев 2012, 00:03
Версия Web Builder: 14.2.2
Имя: Алексей
Контактная информация:

Re: выпадающий текст

Сообщение Alex » 22 ноя 2012, 00:49

Да мы уж все поняли, что Вы великий гуру в вопросах сайто строения, извините что потревожили по таким мелочам :-) . Здесь вообще странный форум, все что то спрашивают, бывает по пять раз одно и тоже и очевидные вещи, прям сборище лентяев :-) И зачем вообще эти форумы придумали .... остаётся не ясно... :ne_vi_del:
Про дочку конечно повеселило, хотя пример сомнительный и явно притянутый. У меня вот сын сам раздевается, когда надо и не надо :-) , а ему пока полтора года...

p.s. Ради прикола, завтра на работе заказчику обязательно скажу, что он всё может сделать сам, просто он ленивый и ни чего не хочет добиваться самостоятельно, я предвкушаю его глаза :sh_ok: .



Если программа тебе понятна, значит она уже устарела.
(Правило Биттона)
Онлайн-магазин готовых решений
В личке принимаю, только по техническим вопросам! На вопросы по программе в личке не отвечаю!

Аватара пользователя

Конструкторщик
Эксперт
Эксперт
Сообщения: 1407
Зарегистрирован: 06 фев 2012, 14:01
Версия Web Builder: 12.0.2

Re: выпадающий текст

Сообщение Конструкторщик » 22 ноя 2012, 02:59

Alex писал(а):
p.s. Ради прикола, завтра на работе заказчику обязательно скажу, что он всё может сделать сам, просто он ленивый и ни чего не хочет добиваться самостоятельно, я предвкушаю его глаза :sh_ok: .



+1..Улыбнуло. :co_ol:
Однажды купивший-будет платить все время.

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5092
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Re: выпадающий текст

Сообщение anonimus » 22 ноя 2012, 12:18

какие злые вы тут :-)
что я не так сделал вам?
ладно, не буду комментировать
счастья вам :-):
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Мои товары в магазине https://market.wysiwygwebbuilder.ru/anonimus.html
==============

Аватара пользователя

Alex
Admin
Admin
Сообщения: 3160
Зарегистрирован: 06 фев 2012, 00:03
Версия Web Builder: 14.2.2
Имя: Алексей
Контактная информация:

Re: выпадающий текст

Сообщение Alex » 22 ноя 2012, 13:57

Да не злые мы, зря так о нас думаешь :-): ... И тебе всего наилучшего :-):
Нафлудились в доволь, давайте, что нибудь продуктивное теперь писать....
Что то мало вопросов по программе, все всё знают уже что ли?! :-):
Онлайн-магазин готовых решений
В личке принимаю, только по техническим вопросам! На вопросы по программе в личке не отвечаю!

Аватара пользователя

Peelman
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 19 окт 2012, 13:53

Re: выпадающий текст

Сообщение Peelman » 14 дек 2012, 00:04

Поменьше мусор лить надо. Если вы жаждете вопросов, так надо на них отвечать, когда вам их задают.
Лично я например задал вопрос "Alexy" ещё тут одному модеру более месяца назад, так до сих пор от них ответа не получил.

Аватара пользователя

Alex
Admin
Admin
Сообщения: 3160
Зарегистрирован: 06 фев 2012, 00:03
Версия Web Builder: 14.2.2
Имя: Алексей
Контактная информация:

Re: выпадающий текст

Сообщение Alex » 14 дек 2012, 01:49

Peelman писал(а):Поменьше мусор лить надо. Если вы жаждете вопросов, так надо на них отвечать, когда вам их задают.
Лично я например задал вопрос "Alexy" ещё тут одному модеру более месяца назад, так до сих пор от них ответа не получил.

А Alex и ещё один модератор Вам обещали, что они всё знают и готовы на все Ваши вопросы отвечать?! Извините, но мы не энциклопедия! А программу за Вас ни кто не будет изучать и потом Вам разжевывать, Вы просто лентяй!
Вам, ни кто, ни чего здесь не обязан,не нравится - выход рядом! Да грубо, Вас много, я один!
Онлайн-магазин готовых решений
В личке принимаю, только по техническим вопросам! На вопросы по программе в личке не отвечаю!

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5092
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Re: выпадающий текст

Сообщение anonimus » 14 дек 2012, 09:15

Alex писал(а):Да грубо, Вас много, я один!

Да да!
И я тоже один между прочим, весь такой белый и пушистый :-) :-) :-)
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Мои товары в магазине https://market.wysiwygwebbuilder.ru/anonimus.html
==============


Ответить

Вернуться в «Свободный раздел для общения на темы, не касающиеся Web Builder.»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 0 гостей