Проблема со стилями в обновленном скрипте спойлера

[Admin]

Данная тема создана специально для того чтобы вынести объемные комментарии из основной статьи сайта - Обновленный скрипт спойлера с плавным открытием и скрытием содержимого

К нам поступило два сообщения от пользователя Елена, которые мы перенесли сюда без изменений:

(02.09.2014 14:25:07)Елена писал(а):Здравствуйте! Спасибо за обновленную статью! Но у меня ничего не вышло, может поняла что-то не так...
Дело в том, что мне нужно чтобы первый спойлер и его текст имели одни стили, а второй и все последующие спойлеры и их тексты - другой стиль. По первой статье я прописала в style.css стили для спойлера и текста и они сработали:
.spoiler_links {
font-size: 18px;
color: #fffdcc;
background: -moz-linear-gradient(top, #d040ac,#870367);
background: -webkit-gradient(linear, left top, left bottom, from(#d040ac), to(#870367));
и т.д........}
.spoiler_body {
font-size: 13px;
outline: 2px solid #a3027b;
background: #f0eacc;}
И теперь они отображаются и в обновленном скрипте без изменений, несмотря на то, что я прописываю для второго спойлера другие стили:
.spoiler_links green {
font-size: 17px;
color: #33322a;
font-weight: bold; }
пробовала и вот так:
.green {......}, однако на эти стили скрипт не реагирует и отображает второй спойлер также как первый. Пробовала добавить стили в Шапку, как вы написали - тоже ничего не менялось...
Подскажите мне, пожалуйста, добрый и умный человек, на чем же споткнулась моя логика?!
Заранее благодарю!

(02.09.2014 18:24:52)Елена писал(а):Это опять я. Окончательно запутавшись, я решила сделать страницу со спойлерами заново и вот что получилось. Задать разные стили спойлерам удалось, а вот тексту второго спойлера не получается задать отдельный стиль. Если я переименовываю во втором спойлере имя класса spoiler_body на другой – price_body, то текст, просто размещается на странице как обычный, хоть и с заданным стилем, не появляется и не исчезает. Прописала display:none; к .price_body , так он просто исчез и кликанье по спойлеру ничего не открывает. Предложите, пожалуйста, более разумное и грамотное решение.

[Admin]

Елена, надо Вам подучить немного CSS. Вы просто неправильно обращаетесь с классами. А точнее, классы spoiler_links и spoiler_body вообще не трогайте и оставьте так, как в статье!

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

Посмотрите еще раз нашу статью, там мы добывили два новых класса blue и green.

Классы содержат цвет текста:

Код:

.blue { color:#000099; }
.green { color:#009900; }

Для того чтобы текст заголовка стал зеленым, достаточно добавить класс green к заголовку после класса spoiler_links:

Код:

<div class="spoiler_links green">Спойлер №2 (кликните для открытия/закрытия)</div>

Если Вам необходимо изменить оформление содержимого под спойлером, то действуйте по аналогии с заголовком (просто добавьте дополнительный класс через пробел):

Код:

<div class="spoiler_body green">
А это уже текст второго спойлера!<br>
Данный спойлер также позволяет скрывать<br>
излишнее на сайте!
</div>

Надеюсь, доступно объяснил.
Если что-то не получилось, то можете продолжить спрашивать в комментариях, я их перенесу сюда.

[lika.leaf]

Аллилуйя!!! Все получилось - работает! Спасибо огромное, Верховный Главнокомандующий! А стили мне действительно подучить бы... Эх, было бы время...

[Admin]

Перенес сообщение из основной темы:

(01.10.2015 13:40:14)Костя писал(а):Подскажите, пожалуйста, при добавлении скрипта в шаблон страницы у меня пропадает главное меню - вместо него одна вкладка "Главная" и все.
вот что я добавил:
<style type="text/css">
.spoiler_body {display:none;}
.spoiler_links {cursor:pointer;}
</style>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
if ($(this).parent().children('div.spoiler_body').css("display")=="none") {
$("div[class^='spoiler_body']").hide('normal');
$(this).parent().children('div.spoiler_body').toggle('normal');
}
else $("div[class^='spoiler_body']").hide('normal');
return false;
});
});
</script>

а выводится по стандарту
<div>
текст
<div class="spoiler_body">
внутри
</div></div>

[Admin]

Для того чтобы не пропадало главное меню, удалите повторное подключение библиотеки jQuery, т.к. она у Вас уже подключена в шапке сайта:

Код:

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

А далее Вы пишите комментарий к одному скрипту, а приводите код другого...
Так что лучше скопируйте код заново со странички Обновленный скрипт спойлера

[Crushtest]

(01.10.2015 14:31:02)Admin писал(а):  Для того чтобы не пропадало главное меню, удалите повторное подключение библиотеки jQuery, т.к. она у Вас уже подключена в шапке сайта:

Код:

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

А далее Вы пишите комментарий к одному скрипту, а приводите код другого...
Так что лучше скопируйте код заново со странички Обновленный скрипт спойлера

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

[Admin]

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

[sima]

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

[Admin]

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

Если всегда один и тот же, то добавьте новый стиль:

Код:

.spoiler_open { display:block; }

Спойлеру, который должен быть изначально открыт, добавьте этот стиль:

Код:

<div class="spoiler_body spoiler_open">

Если спойлер зависит от ссылки, то каждому телу спойлера присвойте уникальный id (например, <div class="spoiler_body" id="sp_4">).
В JS коде после строчки:

Код:

$(document).ready(function(){

Добавьте строчку:

Код:

$(window.location.hash).show('normal');

Теперь при переходе по ссылке вида: http://usefulscript.ru/spoiler_smooth_op...w.php#sp_4 будет автоматически открываться тело спойлера с id="sp_4".

[sima]

Спасибо, получилось.

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