Помощь верстка спойлера javascript

Так всё правильно, тело спойлера не является следующим элементом для ссылки, ссылка находится в отдельном контейнере. HTML-разметка корявая, отсюда все и беды.

А при условии если ссылка (изображение) и должна находиться в отдельном контейнере class="spoiler", к примеру, так как должна быть вложенность т.к. для контейнера необходимо задать определенные стили. Как быть тогда?

Положите spoiler_body в контейнер spoiler и код заработает.

Что конкретно должно получится ?

Вот такой простой рабочий вариант можете попробовать

<div class="spoiler-wrapper">

<div class="spoiler folded"><a href="javascript:void(0);">Текст - заголовок спойлера</a></div>

<div class="spoiler-text">Текст, размещенный внутри спойлера.</div>

</div>

<script type="text/javascript">// <![CDATA[
	jQuery(document).ready(function(){
		jQuery('.spoiler-text').hide()
		jQuery('.spoiler').click(function(){
			jQuery(this).toggleClass("folded").toggleClass("unfolded").next().slideToggle()
		})
	})
// ]]></script>

.spoiler a{

	 font-size: 22px;

	 color: #000000;

	 border-bottom: #000000 dashed 2px;

	 text-decoration: none;

}

 

.spoiler:hover {

     cursor: pointer;

}

 

.spoiler-text {

     margin: 15px 25px;

	 font-size: 18px;

}

Получиться должно примерно что-то типа этого.

Потому и желательно чтоб spoiler_body был отдельным контейнером.

Увы, код не сработал при <div class="spoiler"> <div class="spoiler_body"> </div> </div>

<script>
$('.spoiler_links').click(function(){
	$(this).parent().next().toggle();// или slideToggle() для плавного движения
	return false;
});
</script>

Всем спасибо огромное за помощь, все сработало!:)

Жаль нет возможности отблагодарить в виде баллов репутации.

Спасибо.

Для этого и существует кнопка "спасибо".

дани мапов, увы, в упор не вижу такую кнопку 😕 может еще недоступна такая функция, т.к. недавно на форуме

---------- Добавлено 27.09.2016 в 18:49 ----------

В общем по этой же теме есть еще 1 вопрос, нигде не могу нагуглить нормальную информацию по данной теме. Подскажите пожалуйста.

Есть все тот же спойлер:

html

					<div>
	<div class="spoiler spoiler1"><span>Спойлер №1</span>
	<a href="" class="spoiler_links link1"></a></div>
	<div class="spoiler_body">
	Текст под спойлером плавно появляется<br>
	и плавно исчезает при клике по спойлеру
	</div>
	</div>

		<div>
	<div class="spoiler spoiler2"><span>Спойлер №2</span>
	<a href="" class="spoiler_links link2"></a></div>
	<div class="spoiler_body">
	Текст под спойлером плавно появляется<br>
	и плавно исчезает при клике по спойлеру
	</div>
	</div>

		<div>
	<div class="spoiler spoiler3"><span>Спойлер №3</span>
	<a href="" class="spoiler_links link3"></a></div>
	<div class="spoiler_body">
	Текст под спойлером плавно появляется<br>
	и плавно исчезает при клике по спойлеру
	</div>
	</div>

CSS

.spoiler 
  width: 575px
  height: 56px
  color: #fff
  margin-bottom: 10px
  border: 1px #c4c4c4 solid
  border-radius: 3px

.spoiler 
	span
		display: inline-block
		width: 130px
  	height: 34px
		margin-top: 20px
		margin-left: 20px
		border: 1px #ec4848 solid

.spoiler_body 
  display: none
  font-style: italic
  padding: 15px 20px
  background-color: #f8f8f8
  border: 1px #c4c4c4 solid
  border-radius: 3px
  margin-bottom: 10px
  width: 575px
  height: 100%

.spoiler_links 
  cursor: pointer
  background-repeat: no-repeat
  float: right
  margin-top: 10px
  border: 1px #ec4848 solid
  width: 47px
  height: 36px
  z-index: 3

.link1, .link2, .link3
	background-image: url("../image/+.png")

.spoiler1, .spoiler2, .spoiler3
	background-color: #3f444a

JS

$('.spoiler_links').click(function(){
  $(this).parent().next().slideToggle();
  return false;
});

$('.link1').click(function(){
  $('.link1').css('background-image', 'url(../image/-.png)');
  return false;
});

$('.link2').click(function(){
  $('.link2').css('background-image', 'url(../image/-.png)');
});

$('.link3').click(function(){
  $('.link3').css('background-image', 'url(../image/-.png)');
});

$('.link1').click(function(){
  $('.spoiler1').css('background-color', '#ec4848');
});

$('.link2').click(function(){
  $('.spoiler2').css('background-color', '#ec4848');
});

$('.link3').click(function(){
  $('.spoiler3').css('background-color', '#ec4848');
});

Каким образом сделать возврат стилей:

.spoiler1, .spoiler2, .spoiler3
	background-color: #3f444a
.link1, .link2, .link3
	background-image: url("../image/+.png")

При повторном клике на link (свертывании) ?

добавляйте\удаляйте класс к блоку, а не правьте напрямую стили у элементов