Как сделать спойлер раскрытым по умолчанию

Аватар пользователя Sergey1917 Sergey1917 5 апреля в 11:40

Есть симпатичный спойлер на JavaScript. Преимущества: минимум кода в ноде, любое количество на странице, при открытом спойлере закрывается по клику как сверху, так и снизу, что удобно при больших текстах в ноде.

По умолчанию спойлер закрыт. Но вот понадобилось добавить и открытый. То есть на странице по умолчанию будут как закрытые спойлеры, так и открытые.

Кто может помочь - отзовитесь. Буду очень благодарен. Сверстано с этим спойлером уже много. Переходить на другой - сплошной геморой.

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

HTML код спойлера

<div class="spoiler" title="Текст заголовка спойлера">
Содержимое спойлера, которое нужно скрыть.
</div>

JavaScript спойлера

<script>
var spoilers = document.getElementsByClassName('spoiler');
for(var i = 0;i<spoilers.length;i++)
{
 var spoiler=spoilers[i];

 var title = spoiler.title;
 spoiler.title = '';

 var text = spoiler.innerHTML;
 spoiler.innerHTML = '';

 var divTitle = document.createElement('div');
 divTitle.className = 'spoilerTitle';
 divTitle.innerHTML = title;
 divTitle.onclick=function(){
 $(this).next().slideToggle(1000);
 }
 spoiler.appendChild(divTitle);

 var divBody = document.createElement('div');
 divBody.className = 'spoilerBody';
 divBody.innerHTML = text;
 spoiler.appendChild(divBody);
 
 var divBottom = document.createElement('div');
 divBottom.className = 'spoilerBottom';
 divBottom.innerHTML = 'Свернуть';
 divBottom.onclick=function(){
 $(this).parent().slideToggle(1000);
 }
 divBody.appendChild(divBottom);
}
</script>

CSS стили спойлера

/* Спойлер на сайте */
.spoiler{
 font-size: 14px;
 border: #c3cbd1 1px solid;
 border-radius: 10px;
 background: #e9e9e6;
}
.spoilerTitle{
 cursor: pointer;
 margin: 2px 5px;
}
.spoilerBody{
 display: none;
 padding: 2px 5px;
 background: white;
 border-radius: 0 0 10px 10px;
}
.spoilerBottom{
 padding: 0 5px;
 cursor: pointer;
 margin: 0 -5px -2px -5px;
 border-top: #c3cbd1 1px solid;
 border-radius: 0 0 10px 10px;
 background: #e9e9e6;
}
/* Спойлер на сайте КОНЕЦ*/

Вживую посмотреть можно здесь: Продвинутый спойлер

Лучший ответ

Аватар пользователя Sergey1917 Sergey1917 6 апреля в 0:58

Sevix большое спасибо! Выручили. Drinks Drinks Drinks
Получилось немного по другому. Закрытый спойлер со всем кодом остался без изменений. А вот для открытого обернул HTML код спойлера в див с классом "visible".
А в таблице стилей добавил код по вашему совету:

.visible .spoilerBody {
     display: block;
 padding: 2px 5px;
 background: white;
 border-radius: 0 0 10px 10px;   
}

Получил два преимущества:
1. Старый контент теперь не нуждается в переделке, а у меня там этих спойлеров видимо-невидимо.
2. Код HTML остался для закрытых спойлеров минимальным. Для открытых код оказался всего на 1 див больше.

И самое главное: получился универсальный спойлер.

Комментарии

Аватар пользователя Sergey1917 Sergey1917 5 апреля в 22:56

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

Аватар пользователя VasyOK VasyOK 5 апреля в 22:47

Sevix, а как он тогда будет сворачиваться?
Sergey1917, сделать раскрывающиеся контейнер конечно есть способы. Но вот зачем его делать чтобы он был по умолчанию раскрытым?

Аватар пользователя Sergey1917 Sergey1917 5 апреля в 23:12

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

Аватар пользователя Sevix Sevix 5 апреля в 22:49

VasyOK wrote: Sevix, а как он тогда будет сворачиваться?

Так там же .slideToggle
Если он скрыт - развернет. Если развернутый - скроет.

Аватар пользователя Sevix Sevix 5 апреля в 23:03

Sergey1917 wrote: Как бы лучше сделать, чтобы можно было открытый и закрытый поставить на одной странице?

Если надо чтоб был скрытый:
<div class="spoilerBody" style="display: none">...

Чтобы был открытый:
<div class="spoilerBody" style="display: block">...

Аватар пользователя Sergey1917 Sergey1917 5 апреля в 23:33

Sevix
С таким дивом спойлер вообще не виден. Может еще надо и в стилях что-то изменить?

Аватар пользователя Sevix Sevix 5 апреля в 23:52

Можно и в скрипте условие прописать, но проще будет так.
Оберните весь код спойлера в див. Для скрытого с классом "hidden", для открытого - с классом "visible".
И в стилях пропишите:

.hidden .spoilerBody {
     display: none;
}
.visible .spoilerBody {
     display: block;
}
Аватар пользователя Sergey1917 Sergey1917 6 апреля в 0:58

Sevix большое спасибо! Выручили. Drinks Drinks Drinks
Получилось немного по другому. Закрытый спойлер со всем кодом остался без изменений. А вот для открытого обернул HTML код спойлера в див с классом "visible".
А в таблице стилей добавил код по вашему совету:

.visible .spoilerBody {
     display: block;
 padding: 2px 5px;
 background: white;
 border-radius: 0 0 10px 10px;   
}

Получил два преимущества:
1. Старый контент теперь не нуждается в переделке, а у меня там этих спойлеров видимо-невидимо.
2. Код HTML остался для закрытых спойлеров минимальным. Для открытых код оказался всего на 1 див больше.

И самое главное: получился универсальный спойлер.