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

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

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

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

Думаю понятно объяснил) Удачи в шпилинге кода братюни)
» Добавил: * RUKANO
» Время добавления: 6 Янв 2017 в 08:37
» Посмотров: 956
» textarea / Скачать
» Рейтинг: [+0 | -0]
Комментарии [2]
  1. <!DOCTYPE html><head>
  2. <title>Злой Спойлер</title>
  3.  
  4. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  5.  
  6. <script type="text/javascript">
  7. $(document).ready(function(){
  8. $('.spoiler').click(function(){var pokaz=$(this).attr('pokaz'); var name=$(this).attr('name');
  9. if(pokaz==1){$(this).attr('pokaz',0); $('#'+name).slideUp(200); $(this).html('Открыть');}
  10. else{$(this).attr('pokaz',1); $('#'+name).slideDown(200); $(this).html('Закрыть');} });
  11. });
  12. </script>
  13.  
  14. <style>
  15. .spoiler{color:#fff; font-size:16px; padding:6px 5px 6px 15px; border-top:1px solid #000; background:#220b2d;}
  16. .spoiler:hover{cursor:pointer;}
  17. .spoiler_panel{color:#220c31; font-size:14px; display:none; padding:30px 5px 30px 5px; background:#c497e3;}
  18. </style>
  19.  
  20. </head><body>
  21.  
  22. <div name="spoiler_1" pokaz="0" class="spoiler">Открыть</div>
  23. <div id="spoiler_1" class="spoiler_panel">Тут какой-то текст или какая-то любая хрень</div>
  24. <div name="spoiler_2" pokaz="0" class="spoiler">Открыть</div>
  25. <div id="spoiler_2" class="spoiler_panel">Тут какой-то текст или какая-то любая хрень</div>
  26.  
  27. </body></html>
Онлайн: 31
Реклама