Злой Спойлер by RUKANO

<!DOCTYPE html><head>
<title>Злой Спойлер</title>
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){ 
$('.spoiler').click(function(){var pokaz=$(this).attr('pokaz'); var name=$(this).attr('name');
if(pokaz==1){$(this).attr('pokaz',0); $('#'+name).slideUp(200); $(this).html('Открыть');}
else{$(this).attr('pokaz',1); $('#'+name).slideDown(200); $(this).html('Закрыть');} }); 
});
</script>
 
<style>
.spoiler{color:#fff; font-size:16px; padding:6px 5px 6px 15px; border-top:1px solid #000; background:#220b2d;}
.spoiler:hover{cursor:pointer;}
.spoiler_panel{color:#220c31; font-size:14px; display:none; padding:30px 5px 30px 5px; background:#c497e3;}
</style>
 
</head><body>
 
<div name="spoiler_1" pokaz="0" class="spoiler">Открыть</div>
<div id="spoiler_1" class="spoiler_panel">Тут какой-то текст или какая-то любая хрень</div>
<div name="spoiler_2" pokaz="0" class="spoiler">Открыть</div>
<div id="spoiler_2" class="spoiler_panel">Тут какой-то текст или какая-то любая хрень</div>
 
</body></html>

» Описание: Кароч) написал по быстрому спойлерок и дал ему название Злой_Спойлер.

Спойлер можно использовать как угодно, хоть один в один по тыщ раз вкладывать.
На странице может быть неограниченное количество спойлеров.
Кнопку открытия можно размещать отдельно от спойлера, где угодно, не обязательно рядом.
Главное:
кнопка открытия имеет атрибут name="тут_id"
каждый спойлер имеет атрибут ID="тут_id"
Так вот, они должны совпадать и быть уникальными!!
Если у вас два спойлера и у них одинаковые ID="тут_id" name="тут_id" или что то одно, тогда вы какашко-криворучко

)

У одного спойлера должно быть допустим:
ID="1" name="1"
У второго спойлера совпадать не должно с предыдущим. можно так допустим:
ID="spoilerochek456" name="spoilerochek456"

Я вот допустим решил поставить 4 спойлера в низу сайта а кнопки открития в верху сайта)
Вопрос: оно будет работать?
Ответ: конечно будет, главное что бы не перепутал ID="тут_id" name="тут_id"

Думаю понятно объяснил) Удачи в шпилинге кода братюни)
» Время добавления: 6 Янв 2017 в 08:37
» Посмотров: 3009
» textarea
» Рейтинг: [+1 | -2]
Комментарии [6]