lastkindnesss

А можно ли реализовать при повторном клике на link (свертывании) возврат стилей при помощи JS?

т.е. клик на класс link происходит смена background-image: url("../image/-.png") background-color: #ec4848 - это реализовано

второй клик на link должна происходить смена background-image: url("../image/+.png") background-color: #3f444a в исходное положение

Как можно реализовать это при помощи JS?

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

---------- Добавлено 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 (свертывании) ?

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

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

Спасибо.

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

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

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

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

Добрый день, помогите пожалуйста с простым спойлером на javascript? Необходимо реализовать спойлер чтоб скрывать-раскрывать блок с текстом. Не получается реализовать, не могу понять в чем проблема и как правильно. Подскажите пожалуйста.

html

	<div>

	<div class="spoiler">Спойлер №1 

	<a href="" class="spoiler_links"><img src="image.png"></a></div>

	<div class="spoiler_body">

	Текст под спойлером плавно появляется<br>

	и плавно исчезает при клике по спойлеру

	</div>

	</div>

css

.spoiler {

  background-color: #3f444a;

  width: 575px;

  height: 56px;

  color: #fff;

  padding: 5px 0;

}



.spoiler_body {

  display: none;

  font-style: italic;

  padding: 15px 20px;

}



.spoiler_links {

  cursor: pointer;

  background-repeat: no-repeat;

  width: 47px;

  height: 34px;

  float: right;

}

javascript

$('.spoiler .spoiler_body').hide();

$('.spoiler_links').click(function(){

$(this).next().toggle();

});