Доработать слайдер
Добрый день! С Новым Годом, Вас!
Доделываю спойлер здесь: https://jsfiddle.net/y2kLhqpo/ Мне необходимо реализовать гибкое изменение заголовков спойлера. Чтобы до открытия спойлера, отображался текст, который идёт до символа pipe (|) - например «Показать изображения». А после открытия, текст, который идёт после символа pipe (|) - например «Скрыть все изображения». Так же нужно предусмотреть вариант, когда в заголовке идёт текст без символа pipe (|). Тогда один текст и до открытия и после. Я уже даже накидал регулярку, чтобы не утруждать наших уважаемых профессоров (очень уж я регулярки люблю):
На открытие:
.replace(/\<div class=\"titleSpoiler\"\>(.*?)( |\t)*\|(.*?)\<\/div\>/gm, "$1"); // Здесь будет находиться текст открытия спойлера
На закрытие:
.replace(/\<div class=\"titleSpoiler\"\>(.*?)( |\t)*\|(.*?)\<\/div\>/gm, "$3"); // Здесь будет находиться текст закрытия спойлера
Но, пока не знаю как её сюда вписать... |
Открывашка 250 открытие/закрытие блоков со сменой текста на кнопке
snovapavel,
Открывашка 250 открытие/закрытие блоков со сменой текста на кнопке. вам повезло юбилейный номер. это шоу будет вечным :lol:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<style type="text/css">
.titleSpoiler {
font-weight: bold;
cursor: pointer;
}
.bodySpoiler {
display: none;
font-style: italic;
}
.collapseSpoiler {
margin: 16px 0 0 0;
color: blue;
cursor: pointer;
}
</style>
<script>
$(function() {
$(".titleSpoiler").each(function(g, a) {
function e(c) {
c.preventDefault();
c = +d.is(":hidden");
d.slideToggle(200);
a.text(b[c])
}
a = $(a);
var b = $.trim(a.text()).split("|");
b.push(b[0]);
var d = a.next(".bodySpoiler"),
f = $(".collapseSpoiler", d);
a.text(b[0]);
a.click(e);
f.click(e)
})
});
</script>
</head>
<body>
<div class="titleSpoiler">Показать изображения | Скрыть все изображения</div>
<div class="bodySpoiler">
Текст под спойлером
<br> имеет класс spoiler_body.
<br> Для придания стиля данному тексту
<br> просто добавьте еще один класс.
<div class="collapseSpoiler">Свернуть спойлер</div>
</div>
<br>
<div class="titleSpoiler">Показать цитату | Скрыть цитирование автора</div>
<div class="bodySpoiler">
А это уже текст второго спойлера!
<br> Данный спойлер также позволяет скрывать
<br> излишнее на сайте!
<div class="collapseSpoiler">Свернуть спойлер</div>
</div>
<br>
<div class="titleSpoiler">один текст и до открытия и после</div>
<div class="bodySpoiler">
А это уже текст второго спойлера!
<br> Данный спойлер также позволяет скрывать
<br> излишнее на сайте!
<div class="collapseSpoiler">Свернуть спойлер</div>
</div>
</body>
</html>
|
Уважаемый (мною) РОНИ!
Уж от вас я ждал конструктивного ответа. Я изучаю JavaScript и через месяц сам буду отвечать на свои вопросы :) А сейчас у меня повис проект. Поэтому, если хотите, можете помочь мне. Я буду очень вам признателен. |
snovapavel,
посмотрите пост 2, жаль на форуме нет меток, этот пост тоже канет в лету и будет 251 :cray: :) |
рони,
Благодарю, почти то, что нужно! А как прикрутить "авто-гармошку", чтобы по клику на один из заголовков предыдущие закрывались автоматом, если не затруднит, подскажите? |
mikeac,
$(function() {
$(".titleSpoiler").each(function(g, a) {
function e(c) {
c.preventDefault();
c = +d.is(":hidden");
var el = $(".collapseSpoiler").not(f).filter(":visible");
el.length && el.click();
d.slideToggle(200);
a.text(b[c])
}
a = $(a);
var b = $.trim(a.text()).split("|");
b.push(b[0]);
var d = a.next(".bodySpoiler"),
f = $(".collapseSpoiler", d);
a.text(b[0]);
a.click(e);
f.click(e)
})
});
|
mikeac,
или так
$(function() {
$(".titleSpoiler").each(function(g, a) {
function e(c) {
c.preventDefault();
c = +d.is(":hidden");
var el = $(".bodySpoiler:visible").not(d).prev();
el.length && el.click();
d.slideToggle(200);
a.text(b[c])
}
a = $(a);
var b = $.trim(a.text()).split("|");
b.push(b[0]);
var d = a.next(".bodySpoiler"),
f = $(".collapseSpoiler", d);
a.text(b[0]);
a.click(e);
f.click(e)
})
});
|
рони,
Отлично, спасибо! И, если можно, еще одна задача - прикрутить ко всей этой конструкции отдельную строку "развернуть/свернуть всЁ", подскажите? |
Цитата:
|
| Часовой пояс GMT +3, время: 06:04. |