Скрипт спойлеров в один ряд
В предыдущей теме скрипта слайдера, спрятанного под спойлер мы рассмотрели скрипт спойлера внутри которого располагался простой слайдер для просмотра изображений. В данной теме мы хотим предложить Вам скрипт со спойлерами, расположенными по горизонтали, при клике по заголовкам которых будет отображаться скрытое содержимое данных спойлеров.
Главным отличием данного скрипта от предыдущих, помимо расположения спойлеров в один ряд, будет наличие стрелок "Вперед" и "Назад", по клику по которым будет происходить сворачивание текущего спойлера и разворачивание следующего или предыдущего спойлера в строке в зависимости от того, на какую кнопку Вы кликнули. В итоге получится что-то вроде слайдера спойлеров содержимым которых может быть что угодно, не только изображения.
Для того чтобы понять о чем идет речь и наглядной демонстрации работы предлагаемого нами скрипта, обратите внимание на заголовки спойлеров, находящихся ниже. При клике по какому-нибудь заголовку спойлера, появится его содержимое. При повторном клике - скроется. При клике по стрелкам можно будет перейти к следующему или предыдущему спойлеру в строке:
Много текста
Много текста
Отметим, что если был выбран последний спойлер в строке и произведен клик по стрелке "Вперед", то будет выполнен переход к первому спойлеру в данной строке. И наоборот, если был выбран первый спойлер в строке и произведен клик по стрелке "Назад", то будет выполнен переход к последнему спойлеру в данной строке.
Для реализации подобных спойлеров в одну строку (по горизонтали) Вам потребуется подключение на Вашем сайте библиотеки jQuery. Сделать это можно следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Далее Вам необходимо будет разместить коды спойлеров и их содержимого, которые будут располагаться в одну строку:
<div style="text-align: center;">
<div class="spoilers">
<div>Спойлер № 1<div><img src="image/img_1.png" alt=""></div></div>
<div>Спойлер № 2<div><img src="image/logo.png" alt=""></div></div>
<div>Спойлер № 3<div>Текст...</div></div>
<div>Спойлер № 4<div>Еще один текст...</div></div>
<div>Спойлер № 5<div>Много текста<br>Много текста<br>Много текста</div></div>
</div>
<div class="spoilers">
<div>Спойлер № 11<div><img src="image/img_1.png" alt=""></div></div>
<div>Спойлер № 12<div><img src="image/img_2.png" alt=""></div></div>
<div>Спойлер № 13<div><img src="image/img_3.png" alt=""></div></div>
<div>Спойлер № 14<div><img src="image/img_4.png" alt=""></div></div>
</div>
</div>Не забываем о размещении на страничке кнопок "Вперед" и "Назад" для переключения между спойлерами одного ряда:
<img src="image/sp_back.png" alt="Назад" class="sp_back">
<img src="image/sp_forward.png" alt="Вперед" class="sp_forward">Отметим, что каждой из кнопок "Вперед" и "Назад" может быть несколько на одной страничке и располагаться они могут в удобном для Вас месте. Все кнопки независимо от их расположения будут выполнять одну и ту же функцию - переход к соседнему спойлеру от выбранного в данный момент.
Далее в шапку сайта между тегами <head> и </head> необходимо добавить стили для первоначального скрытия содержимого спойлеров и правильного их отображения:
<style type="text/css">
.spoilers>div { display: inline-block; width: 105px; margin: 3px; padding: 2px;
border-radius: 8px; font-size: 14px; text-align: center; font-weight: bold;
color: #0000FF; border: 1px solid #808080; cursor: pointer; }
.selected { background-color: #CCCCCC; }
.spoilers>div>div, .clone { display: none; }
.sp_back { float: left; cursor: pointer; }
.sp_forward { float: right; cursor: pointer; }
</style>Теперь остается лишь добавить JavaScript код, который будет показывать и скрывать содержимое спойлеров расположенных в одну строку, а также осуществлять переходы между спойлерами при кликах по кнопкам "Вперед" и "Назад":
<script type="text/javascript">
$(document).ready(function(){
$('.sp_back, .sp_forward').click(function() {
group = $('.selected').parent().children('div');
this_elem = group.index($('.selected'));
});
$('.sp_back').click(function() {
if (this_elem==0) group.eq(group.length-1).trigger('click');
else group.eq(this_elem-1).trigger('click');
});
$('.sp_forward').click(function() {
if (this_elem==group.length-1) group.eq(0).trigger('click');
else group.eq(this_elem+1).trigger('click');
});
$('.spoilers>div').click(function(){
time = 400;
$('.clone').clearQueue().fadeOut(time);
if ($(this).hasClass('selected')!=true) {
$('.spoilers>div').removeClass('selected');
$(this).addClass('selected');
$(this).children('div').clone().insertAfter($(this).parent()).addClass('clone')
.delay(time).fadeIn(time);
}
else $('.spoilers>div').removeClass('selected');
});
});
</script>Данный скрипт расположения спойлеров в один ряд будет очень полезен тем, у кого на страничке много разных данных, которые необходимо как-то систематизировать и показывать только по клику.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Может Вы имели виду сделать при загрузке странички один из спойлеров открытым?
Тогда присвойте нужному заголовку спойлера уникальный id (например, id="sp_open").
А в конец JavaScript кода (перед последними скобками }); ) добавьте код: $('#sp_open').click();