Форум

iprazor · #1 (**permalink**) 24.11.2014, 09:47

Доброго времени суток.
Пытаюсь сделать простенький спойлер для скрытия контента кликом:

Каркас:

<div class="spoiler-wrapper">
<div class="spoiler unfolded">Открытый</div>
<div class="spoiler-text">text</div>
</div>

<div class="spoiler-wrapper">
<div class="spoiler folded">Закрытый</div>
<div class="spoiler-text">text</div>
</div>

Скрипт:

jQuery(document).ready(function(){         
   if(jQuery('.spoiler').hasClass("unfolded")) {
            jQuery('.spoiler-text').show();
   }
   else if(jQuery('.spoiler').hasClass("folded")) {
       jQuery('.spoiler-text').hide();
   }                        
        jQuery(".spoiler").click(function(){
			jQuery(this).toggleClass("folded").toggleClass("unfolded").next().slideToggle();
	   })       
	})

Ссылка на fiddle:http://jsfiddle.net/96FY6/21/

По замыслу состояние дивов-спойлеров должно меняться, в зависимости от присвоенного класса (folded - контент скрыт, unfolded - показан).
Однако на практике ко всем спойлерам применяется условие, объявленное первым.
Реально ли реализовать такой функционал, для одноимённых дивов?

рони · #2 (**permalink**) 24.11.2014, 10:55

iprazor,
условие ненужно, во вторых всё заменяет одна строка в css.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
jQuery(document).ready(function(){
   jQuery('.spoiler.unfolded + div').show(); //??? нужно ли
   jQuery('.spoiler.folded + div').hide() ;// .spoiler.folded + div {display: none;}
        jQuery(".spoiler").click(function(){
			jQuery(this).toggleClass("folded").toggleClass("unfolded").next().slideToggle();
	   })
	})

  </script>
</head>

<body>
<div class="spoiler-wrapper">
<div class="spoiler unfolded">Открытый</div>
<div class="spoiler-text">text</div>
</div>

<div class="spoiler-wrapper">
<div class="spoiler folded">Закрытый</div>
<div class="spoiler-text">text</div>
</div>

</body>

iprazor · #3 (**permalink**) 25.11.2014, 03:13

Огромное спасибо, то, что надо!

Форум

Справочник

Discord чат

Курсы javascript