Перейти к содержимому


Спойлер На Контент-Странице


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 50

#21 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 21 Январь 2016 - 13:00

Просмотр сообщенияSmailer (20 Январь 2016 - 07:30) писал:

То-есть так: ?

<style>
div.cli {display:none;margin-left:20px;}
div.clion {display:block;padding:5px;}
</style>
<script type="text/javascript">

$(document).ready(function(){
$('a.cli').click(function(){
if($(this).parent().next('div').hasClass("clion")){
$('div.cli').removeClass("clion");
}
else{
$('div.cli').removeClass("clion");
$(this).parent().next('div').addClass("clion");
}
});

});
</script>
<p><a href="javascript:void(0);" class="cli">Маршрут</a></p>

<div class="cli">
<p> Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить "левые" рейсы, сократить простои и пробег автомобилей.</p>
</div>

<p><a href="javascript:void(0);" class="cli">Маршрут2</a></p>

<div class="cli">
<p> Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить "левые" рейсы, сократить простои и пробег автомобилей.</p>
</div>

Это мы кидаем в main.css


А это мы кидаем или в источник или в шаблоны > HTML

{% IF PAGE_NAME= Заголовок страницы %}
<style>
div.cli {display:none;margin-left:20px;}
div.clion {display:block;padding:5px;}
</style>
<script type="text/javascript">

$(document).ready(function(){
$('a.cli').click(function(){
if($(this).parent().next('div').hasClass("clion")){
$('div.cli').removeClass("clion");
}
else{
$('div.cli').removeClass("clion");
$(this).parent().next('div').addClass("clion");
}
});

});
</script>
<p><a href="javascript:void(0);" class="cli">Маршрут</a></p>

<div class="cli">
<p> Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить "левые" рейсы, сократить простои и пробег автомобилей.</p>
</div>

<p><a href="javascript:void(0);" class="cli">Маршрут2</a></p>

<div class="cli">
<p> Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить "левые" рейсы, сократить простои и пробег автомобилей.</p>
</div>
{% ENDIF %}

Но если так, то у меня какая то белиберда получается)
"После его установки, укажите пожалуйста url" - тут я не очень понял какую ссылку указывать если посути все находиться на тойже странице. или вы имели ввиду якорь?

Можете показать как это должно выглядеть что бы в итоге мы получили



Здравствуйте, откройте редактор страницы, на которой будет создан спойлер, для это го зайдите в раздел Сайт-Страницы о откройте редактирование, и при помощи кнопки "Источник" откройте код страницы в данное поле вставляете код
<style type="text/css">div.cli {display:none;margin-left:20px;}
div.clion {display:block;padding:5px;}
</style>
<script type="text/javascript">

$(document).ready(function(){
$("a.cli").click(function(){
if($(this).parent().next("div").hasClass("clion")){
$("div.cli").slideUp();
$("div.cli").removeClass("clion");
}
else{
$("div.cli").removeClass("clion");
$(this).parent().next("div").slideDown();
$(this).parent().next("div").addClass("clion");
}
});

});
</script>
<p><a class="cli" href="javascript:void(0);">Маршрут</a></p>
<div class="cli">
<p>Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить &quot;левые&quot; рейсы, сократить простои и пробег автомобилей.</p>
</div>
<p><a class="cli" href="javascript:void(0);">Маршрут2</a></p>
<div class="cli">
<p>Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить &quot;левые&quot; рейсы, сократить простои и пробег автомобилей.</p>
</div>


#22 Smailer

Smailer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 661 сообщений
  • ГородВолгоград

Отправлено 21 Январь 2016 - 16:14

Просмотр сообщенияИрина345 (21 Январь 2016 - 13:00) писал:

Здравствуйте, откройте редактор страницы, на которой будет создан спойлер, для это го зайдите в раздел Сайт-Страницы о откройте редактирование, и при помощи кнопки "Источник" откройте код страницы в данное поле вставляете код
<style type="text/css">div.cli {display:none;margin-left:20px;}
div.clion {display:block;padding:5px;}
</style>
<script type="text/javascript">

$(document).ready(function(){
$("a.cli").click(function(){
if($(this).parent().next("div").hasClass("clion")){
$("div.cli").slideUp();
$("div.cli").removeClass("clion");
}
else{
$("div.cli").removeClass("clion");
$(this).parent().next("div").slideDown();
$(this).parent().next("div").addClass("clion");
}
});

});
</script>
<p><a class="cli" href="javascript:void(0);">Маршрут</a></p>
<div class="cli">
<p>Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить &quot;левые&quot; рейсы, сократить простои и пробег автомобилей.</p>
</div>
<p><a class="cli" href="javascript:void(0);">Маршрут2</a></p>
<div class="cli">
<p>Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить &quot;левые&quot; рейсы, сократить простои и пробег автомобилей.</p>
</div>

Есть прогресс.
Изображение

Но как сделать пунктирную линию ?
Изображение

#23 Dars

Dars

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 410 сообщений

Отправлено 21 Январь 2016 - 17:14

Просмотр сообщенияSmailer (21 Январь 2016 - 16:14) писал:

Есть прогресс.
Изображение

Но как сделать пунктирную линию ?
Изображение
Здравствуйте!
Если пунктирная линия должна быть только под названием, то в main.css добавьте строку:

a.cli {text-decoration:none; border-bottom: 1px dashed black;}

Если пунктирная линия должна быть над текстом, то в main.css следует добавить:

.cli p {border-top: 1px dashed black;}

Чтобы при этом не подчеркивалась ссылка, добавьте:

a.cli {text-decoration:none;}


#24 Smailer

Smailer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 661 сообщений
  • ГородВолгоград

Отправлено 13 Февраль 2016 - 15:48

Вставил Код.. А Почему то никакой Анимации не происходит..
<p><a class="cli" href="javascript:void(0);">Текст 1</a></p>
<div class="cli">
<p>Текст 2</p>
</div>
<p><a class="cli" href="javascript:void(0);">Текст 3</a></p>
<div class="cli">
<p>текст 4</p>
</div>


#25 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 14 Февраль 2016 - 14:56

Просмотр сообщенияSmailer (13 Февраль 2016 - 15:48) писал:

Вставил Код.. А Почему то никакой Анимации не происходит..
<p><a class="cli" href="javascript:void(0);">Текст 1</a></p>
<div class="cli">
<p>Текст 2</p>
</div>
<p><a class="cli" href="javascript:void(0);">Текст 3</a></p>
<div class="cli">
<p>текст 4</p>
</div>

Уточните, на какой странице находится данный код?

#26 Smailer

Smailer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 661 сообщений
  • ГородВолгоград

Отправлено 14 Февраль 2016 - 15:13

Просмотр сообщенияMikDark (14 Февраль 2016 - 14:56) писал:

Уточните, на какой странице находится данный код?

Удалял.. сейчас временно разместил в разделе "О Нас"

#27 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 14 Февраль 2016 - 15:19

Просмотр сообщенияSmailer (14 Февраль 2016 - 15:13) писал:

Удалял.. сейчас временно разместил в разделе "О Нас"

Вы забыли добавить над кодом:
<style type="text/css">div.cli {display:none;margin-left:20px;}
div.clion {display:block;padding:5px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("a.cli").click(function(){
if($(this).parent().next("div").hasClass("clion")){
$("div.cli").slideUp();
$("div.cli").removeClass("clion");
}
else{
$("div.cli").removeClass("clion");
$(this).parent().next("div").slideDown();
$(this).parent().next("div").addClass("clion");
}
});
});
</script>


#28 Smailer

Smailer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 661 сообщений
  • ГородВолгоград

Отправлено 14 Февраль 2016 - 15:21

MikDark

Все разобрался спасибо.

#29 Smailer

Smailer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 661 сообщений
  • ГородВолгоград

Отправлено 15 Февраль 2016 - 01:51

Вроде со спойлером полностью разобрался.
Но Они прыгают \ Скачут
Все настроено на странице доставки.
Объясню как они скачут.


При нажатии пока все хорошо..
Изображение

А теперь внимание: все пропорции скриншотов максимально масштабированный
Изображение

Если вы сами просто зайдете на сайт и попробуйте вы поймете как текст бегает при нажатии и все выглядит очень КВАДРАТНо и не естественно.

++

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


++

Подскажите как поменять цвет при наведении на ссылку, но исключительно для этого скрипта)
(Подскажите как исправить эти три момента)

#30 Юля123

Юля123

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 15 Февраль 2016 - 12:17

Просмотр сообщенияSmailer (15 Февраль 2016 - 01:51) писал:

Вроде со спойлером полностью разобрался.
Но Они прыгают \ Скачут
Все настроено на странице доставки.
Объясню как они скачут.


При нажатии пока все хорошо..
Изображение

А теперь внимание: все пропорции скриншотов максимально масштабированный
Изображение

Если вы сами просто зайдете на сайт и попробуйте вы поймете как текст бегает при нажатии и все выглядит очень КВАДРАТНо и не естественно.

++

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


++

Подскажите как поменять цвет при наведении на ссылку, но исключительно для этого скрипта)
(Подскажите как исправить эти три момента)

Здравствуйте,

1) Для страницы "Доставка" найдите в источнике код:

div.clion {display:block;padding:5px}

и замените на код:

div.clion {display:block;}


текст перестанет съезжать.

2) Закрываются все вкладки, потому что скрипт так работает. Названия у всех 4 блоков одинаковое, и когда скрипт скрывает блок с этим именем, реагирует на все 4 блока. Чтобы это исправить, код станицы доставка замените на код:

Скрытый текст


Что сделали:

1) Каждому тегу <a class="cli"..> добавили цифру(1,2,3) в класс, тем самым сменив имя. То же самое сделали и для тегов <div> что скрывались.
2) Далее добавили скрипты, конкретно для каждого имени.


3) Цвет при наведении,  в конце main.css добавьте код:

a.cli:hover {
	color: red;
}

цвет меняйте на нужный Вам.

#31 Smailer

Smailer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 661 сообщений
  • ГородВолгоград

Отправлено 16 Февраль 2016 - 13:02

Просмотр сообщенияЮля123 (15 Февраль 2016 - 12:17) писал:

Здравствуйте,


Все супер. Есть два момента.

Уж простите за простой вопрос - но как оптимизировать в css
4 строчки

a.cli:hover {
    color: #CE92AF;
}

a.cli1:hover {
    color: #CE92AF;
}

a.cli2:hover {
    color: #CE92AF;
}

a.cli3:hover {
    color: #CE92AF;

Чтобы была одна стрчока отвечающая за div класс. всех пунктов где это есть чтобы не ставить все время строчки. в данном случае касаемо цвета.

и второй более чуть важный.
При загрузке страницы - не очень красивая "погрузка" получается.

с секунду примерно такая картинка видна
Изображение

Можно ли сделать или более плавную или как то иначе - но в первую секунду думаешь что у тебя интернет медленный или страница тяжелая или что сейчас чт о то не погрузиться..
Как то не очень правильная погрузка - думаю даже у вас будет такое явление какой бы ПК у вас не был. Все равно тут почему то не так быстро открывается эта страница хотя скрипт совсем маленький. при этом вначале отображаются "-------------------"..

#32 Юля123

Юля123

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 16 Февраль 2016 - 17:08

Просмотр сообщенияSmailer (16 Февраль 2016 - 13:02) писал:

Все супер. Есть два момента.

Уж простите за простой вопрос - но как оптимизировать в css
4 строчки

a.cli:hover {
color: #CE92AF;
}

a.cli1:hover {
color: #CE92AF;
}

a.cli2:hover {
color: #CE92AF;
}

a.cli3:hover {
color: #CE92AF;

Чтобы была одна стрчока отвечающая за div класс. всех пунктов где это есть чтобы не ставить все время строчки. в данном случае касаемо цвета.

и второй более чуть важный.
При загрузке страницы - не очень красивая "погрузка" получается.

с секунду примерно такая картинка видна
Изображение

Можно ли сделать или более плавную или как то иначе - но в первую секунду думаешь что у тебя интернет медленный или страница тяжелая или что сейчас чт о то не погрузиться..
Как то не очень правильная погрузка - думаю даже у вас будет такое явление какой бы ПК у вас не был. Все равно тут почему то не так быстро открывается эта страница хотя скрипт совсем маленький. при этом вначале отображаются "-------------------"..



Эта прокрутка установлена для того, чтобы было понятно, что происходит загрузка. Почему долго загружается? Загружается долго из-за того, что  сначала загружается HTML разметка страницы, затем загружаются все стили и только после этого скрипты. Если соединение с интернетом плохое, то загрузка может занять несколько секунд. Если Вам не нравится такой вид загрузки, то мы можем сменить на другую gif-картинку. Как-то фнкционально ускорить процесс загрузки не получится.

#33 Smailer

Smailer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 661 сообщений
  • ГородВолгоград

Отправлено 16 Февраль 2016 - 19:44

Просмотр сообщенияЮля123 (16 Февраль 2016 - 17:08) писал:

Эта прокрутка установлена для того, чтобы было понятно, что происходит загрузка. Почему долго загружается? Загружается долго из-за того, что  сначала загружается HTML разметка страницы, затем загружаются все стили и только после этого скрипты. Если соединение с интернетом плохое, то загрузка может занять несколько секунд. Если Вам не нравится такой вид загрузки, то мы можем сменить на другую gif-картинку. Как-то фнкционально ускорить процесс загрузки не получится.

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

Там нету картинки - там просто сначала подгружается подчеркивающийся текст.
Если перечитать выше сказанное  - но только сделать это для страницы (а не для ссылки на группу)

#34 Юля123

Юля123

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 17 Февраль 2016 - 10:08

Просмотр сообщенияSmailer (16 Февраль 2016 - 19:44) писал:

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

Там нету картинки - там просто сначала подгружается подчеркивающийся текст.
Если перечитать выше сказанное  - но только сделать это для страницы (а не для ссылки на группу)


Здравствуйте, нашла способ убрать тяжелый спойлер и заменить на более "легкое" решение. Единственный момент, не получится разделить текст на 2 блока (название доставки - краткое описание с ценой), есть два варианта, либо вносить в кнопку-спойлера только название (тогда открываться скрытый текст будет только по клику на название, клик на описание не сработает), либо внести и название  и описание, но разделить по стилям не получится.

Код спойлера:

<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>


"Нажмите что бы открыть или закрыть спойлер" - заменяйте на текст кнопки-спойлера, "Текст внутри спойлера" - заменяйте на то, что у Вас внутри спойлера (будет работать не только с текстом). Так же работает независимо друг от друга.

#35 Smailer

Smailer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 661 сообщений
  • ГородВолгоград

Отправлено 17 Февраль 2016 - 14:55

Просмотр сообщенияЮля123 (17 Февраль 2016 - 10:08) писал:

Здравствуйте, нашла способ убрать тяжелый спойлер и заменить на более "легкое" решение. Единственный момент, не получится разделить текст на 2 блока (название доставки - краткое описание с ценой), есть два варианта, либо вносить в кнопку-спойлера только название (тогда открываться скрытый текст будет только по клику на название, клик на описание не сработает), либо внести и название  и описание, но разделить по стилям не получится.

Код спойлера:

<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>


"Нажмите что бы открыть или закрыть спойлер" - заменяйте на текст кнопки-спойлера, "Текст внутри спойлера" - заменяйте на то, что у Вас внутри спойлера (будет работать не только с текстом). Так же работает независимо друг от друга.

Откладываю пока этот вопрос на самый конец - так как не доконца понял но половину понял.

Я думаю надо будет создать две новых страницы прям наглавной тестовых. и там протестировать эти два кода.
Может я так пойму.
просто не могу в голове визуализировать новый код спойлера.
Но я как попробую и разберусь в этом вопросе я конечно же тут отпишусь.
(новые странички сделаю но скрою)
Если надо будет их тестировать то на пару минут сделать их видимыми можно будет ничего страшного к нам на сайт пока не каждую минуту люди заходят)

#36 Smailer

Smailer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 661 сообщений
  • ГородВолгоград

Отправлено 20 Февраль 2016 - 04:20

Просмотр сообщенияSmailer (17 Февраль 2016 - 14:55) писал:

Откладываю пока этот вопрос на самый конец - так как не доконца понял но половину понял.

Я думаю надо будет создать две новых страницы прям наглавной тестовых. и там протестировать эти два кода.
Может я так пойму.
просто не могу в голове визуализировать новый код спойлера.
Но я как попробую и разберусь в этом вопросе я конечно же тут отпишусь.
(новые странички сделаю но скрою)
Если надо будет их тестировать то на пару минут сделать их видимыми можно будет ничего страшного к нам на сайт пока не каждую минуту люди заходят)

Классная кнопка - быстрая простая - но кнопка.
А чтобы также просто и быстро работало - только с подчеркиванием можно?
- тоесть вместо кнопки сделать подчеркивающийся текст.

#37 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 20 Февраль 2016 - 05:07

Вместо:
<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>

попробуйте использовать:
<div onclick="$('#spoiler1').slideToggle('slow'); return(false);" style="cursor: pointer;">
<p><strong>текст</strong></p>
</div>
<div id="spoiler1" style="display: none;">
<p>текст при нажатии</p>
</div>

открытие спойлера должно происходить плавно

#38 Smailer

Smailer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 661 сообщений
  • ГородВолгоград

Отправлено 20 Февраль 2016 - 05:23

Просмотр сообщенияVaccina (20 Февраль 2016 - 05:07) писал:

Вместо:
<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>

попробуйте использовать:
<div onclick="$('#spoiler1').slideToggle('slow'); return(false);" style="cursor: pointer;">
<p><strong>текст</strong></p>
</div>
<div id="spoiler1" style="display: none;">
<p>текст при нажатии</p>
</div>

открытие спойлера должно происходить плавно

Этот Спойлер ещё лучше и плавнее. Вопрос только легче ли он того что есть сейчас?
И Другой вопрос.. Как выделить первый текст? желательно чтобы было такое же подчеркивание как сейчас - пунктирами.

#39 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 20 Февраль 2016 - 05:46

<div onclick="$('#spoiler1').slideToggle('slow'); return(false);" style="cursor: pointer;">
<p><strong>текст</strong></p>
</div>
<div id="spoiler1" style="display: none;">
<p>текст при нажатии</p>
</div>

замените на:
<div onclick="$('#spoiler1').slideToggle('slow'); return(false);" class="spoiler_link">
текст
</div>
<div id="spoiler1" class="spoiler_content" style="display: none;">
текст при нажатии
</div>

и далее вы можете спокойно через классы стилизовать ссылки и текстовые блоки добавив стили в Main.css, пример:
.spoiler_link{
cursor: pointer;
border-bottom: 1px dotted #000;
}
.spoiler_link:hover{
color:red;
}
.spoiler_content{
box-shadow: 1px 1px 1px #000;
}

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

#40 Smailer

Smailer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 661 сообщений
  • ГородВолгоград

Отправлено 21 Февраль 2016 - 23:43

Просмотр сообщенияVaccina (20 Февраль 2016 - 05:46) писал:

<div onclick="$('#spoiler1').slideToggle('slow'); return(false);" style="cursor: pointer;">
<p><strong>текст</strong></p>
</div>
<div id="spoiler1" style="display: none;">
<p>текст при нажатии</p>
</div>

замените на:
<div onclick="$('#spoiler1').slideToggle('slow'); return(false);" class="spoiler_link">
текст
</div>
<div id="spoiler1" class="spoiler_content" style="display: none;">
текст при нажатии
</div>

и далее вы можете спокойно через классы стилизовать ссылки и текстовые блоки добавив стили в Main.css, пример:
.spoiler_link{
cursor: pointer;
border-bottom: 1px dotted #000;
}
.spoiler_link:hover{
color:red;
}
.spoiler_content{
box-shadow: 1px 1px 1px #000;
}

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

Изображение

ну вот в принципе что у нас получается. (эти линии не совсем те конечно, т.к. нынешние линии которые выше по неписанному закону принято считать спойлерами.)
и этот новый код легче чем текущий?
или мы уже просто варианты перебирали, упустив суть изначального вопроса?




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных