5 апреля 2020 в 11:40
Есть симпатичный спойлер на JavaScript. Преимущества: минимум кода в ноде, любое количество на странице, при открытом спойлере закрывается по клику как сверху, так и снизу, что удобно при больших текстах в ноде.
По умолчанию спойлер закрыт. Но вот понадобилось добавить и открытый. То есть на странице по умолчанию будут как закрытые спойлеры, так и открытые.
Кто может помочь - отзовитесь. Буду очень благодарен. Сверстано с этим спойлером уже много. Переходить на другой - сплошной геморой.
Продвинутый спойлер со стилями оформления, плавным сворачиванием и разворачиванием и возможностью подключения библиотеки, обрабатывающей любое количество спойлеров на странице
HTML код спойлера
Содержимое спойлера, которое нужно скрыть.
</div>
JavaScript спойлера
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;
}
/* Спойлер на сайте КОНЕЦ*/
Вживую посмотреть можно здесь: Продвинутый спойлер
Комментарии
display: block;
}
или инлайн стили пропишите.
Спасибо! Для одного открытого действует.
В коде не силен, обычно методом тыка изменяю. Как бы лучше сделать, чтобы можно было открытый и закрытый поставить на одной странице?
Sevix, а как он тогда будет сворачиваться?
Sergey1917, сделать раскрывающиеся контейнер конечно есть способы. Но вот зачем его делать чтобы он был по умолчанию раскрытым?
На странице много материала по годам и для удобства, уже просмотренный текст прикрыть. То есть для наглядности окинуть взором всю страницу, прикрыть ненужное и читать оставшееся открытым (нужное). Как то так.
Так там же .slideToggle
Если он скрыт - развернет. Если развернутый - скроет.
Если надо чтоб был скрытый:
<div class="spoilerBody" style="display: none">...Чтобы был открытый:
<div class="spoilerBody" style="display: block">...Sevix
С таким дивом спойлер вообще не виден. Может еще надо и в стилях что-то изменить?
Можно и в скрипте условие прописать, но проще будет так.
Оберните весь код спойлера в див. Для скрытого с классом "hidden", для открытого - с классом "visible".
И в стилях пропишите:
display: none;
}
.visible .spoilerBody {
display: block;
}
Sevix большое спасибо! Выручили.
Получилось немного по другому. Закрытый спойлер со всем кодом остался без изменений. А вот для открытого обернул HTML код спойлера в див с классом "visible".
А в таблице стилей добавил код по вашему совету:
display: block;
padding: 2px 5px;
background: white;
border-radius: 0 0 10px 10px;
}
Получил два преимущества:
1. Старый контент теперь не нуждается в переделке, а у меня там этих спойлеров видимо-невидимо.
2. Код HTML остался для закрытых спойлеров минимальным. Для открытых код оказался всего на 1 див больше.
И самое главное: получился универсальный спойлер.