Как реализовать следующее в JS?

Question

[Артём Цымбалюк]

Здравствуйте, ув. Тостерчани
Рубрика тупых вопросов от меня снова открыта.

Подскажите пожалуйста, существует html разметка и js код

<div class="open-1">+</div>
<b>Вопрос? </b>
<div class="answer-one">Всплывающий текст-подсказка</div>

$(".open-1").click(function() {
		$(".answer-one").slideToggle();
	})

Ну то есть, при клике на open-1 откроется див с answer-one

Вопрос : как сделать в js коде так, что бы помимо открытия и закрытия, текст в диве .open-1 менялся, в данном случае + на - , а так же когда всплывающий текст подсказка открыт, тег < b > скрывается. Ну и соответственно всё на оборот.

Спасибо большое заранее

Comments

[Decadal]

"тег скрывается" имелось в виду тег b скрывается?

[Артём Цымбалюк]

Decadal: да

Answer 1

[Decadal]

(".open-1").click(function() {
   var opened = $(this).data("opened"),
   $bTag = $("b");
   if(opened)
   {
      $(this).html("+");
      $bTag.fadeIn(0);
      $(this).data("opened","");
   }
   else 
   {
      $(this).html("-");
      $bTag.fadeOut(0);
      $(this).data("opened","1");
   }
    $(".answer-one").slideToggle();
  })

но учтите, что при использовании нескольких элементов такого вида вы должны оборачивать каждый элемент в некоторый родительский контейнер, и указывать родителя при работе с тегом b. На данный момент код, который подхватывает "b", будет работать со всей страницей вообще.

каждая конструкция такого вопроса должна представлять из себя следующее:

<div class="quest-content">
<div class="open">+</div>
<b>Вопрос? </b>
<div class="answer">Всплывающий текст-подсказка</div>
</div>

тогда вы сможете создать несколько экземпляров (просто копировать-вставить разметку выше), задать в каждом - свой текст, вопрос и прочее, и написать общий код:

(".open").click(function() {
   var opened = $(this).data("opened"),
   $parent = $(this).parent(".quest-content"),
   $bTag = $parent.find("b");
   if(opened)
   {
      $(this).html("+");
      $bTag.fadeIn(0);
      $(this).data("opened","");
   }
   else 
   {
      $(this).html("-");
      $bTag.fadeOut(0);
      $(this).data("opened","1");
   }
    $parent.find(".answer").slideToggle();
  })

это, наверное, плохо оптимизировано, но должно работать.

Comments

[Артём Цымбалюк]

Decadal, да всё верно. А что если тегу b просто представить какой нибудь класс? Как тогда будет выглядеть JS код?

[Decadal]

там, ниже, вариант получше дан)
можно и так, при условии что такая конструкция у вас одна на всю страницу

[Артём Цымбалюк]

Decadal: если применять вариант ниже, то у меня прыгает всё на странице при повторном нажатии (на закрытие) элемента. Ваш вариант мне понравился больше, но у меня 8 таких .open-
Так, можно тегу b прописать класс? или не сам тег b закрывать, а его класс

[Decadal]

об этом я и говорил. Сейчас дополню ответ

[Артём Цымбалюк]

Decadal Спасибо большое

Answer 2

[Bowen]

$(".open-1").on('click', function(){
    this.innerText = (this.innerText == '+') ? '-' : '+';
    $("b, .answer-one").slideToggle();
});

Comments

[Артём Цымбалюк]

Bowen а на что можно поменять slideToggle, что бы не было эффектов ?

[Bowen]

Лучше всего добавить класс, и через css оформить появление/скрытие по вашему вкусу.
Класс можно добавить каждому элементу которому вы захотите или же проще, добавить один класс лишь блоку(родителю).
Пример: https://jsfiddle.net/oaswembf/

[Bowen]

P.S. При наличии свободного времени и главное желания, можно сделать качественнее. Желаю вам удачи!

Answer 3

[lega]

jsfiddle.net/lega911/zL9bx0t5