Как по нажатию открывать один вопрос, а закрывать другой?

Question

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

Здравствуйте
Есть следующий код:
https://codepen.io/anon/pen/KQXmew

$('.price .questions .wrap-q .1 .quest').click(function(){
    $('.price .questions .wrap-q .1 .ans').toggle();
    $('.price .questions .wrap-q .1 .quest .close').toggle();
    $('.price .questions .wrap-q .1 .quest .open').toggle();
  });

$('.price .questions .wrap-q .2 .quest').click(function(){
    $('.price .questions .wrap-q .2 .ans').toggle();
    $('.price .questions .wrap-q .2 .quest .close').toggle();
    $('.price .questions .wrap-q .2 .quest .open').toggle();
  });

$('.price .questions .wrap-q .3 .quest').click(function(){
    $('.price .questions .wrap-q .3 .ans').toggle();
    $('.price .questions .wrap-q .3 .quest .close').toggle();
    $('.price .questions .wrap-q .3 .quest .open').toggle();
  });

То есть существует 3 блока с вопросами и ответами, сейчас по нажатию на один из трёх блоков, открывается нужный ответ, но по нажатию на другой блок, предыдущий ответ не закрывается

Подскажите пожалуйста, как это реализовать?

Comments

[tyzberd]

Переписать всё, или использовать плагин. Если 20 вопросов будет, вы его 20 раз скопируете?

[Andrew]

html покажите, так тяжело

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

Andrew, сейчас накидаю в codepen

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

tyzberd, 20 вопросов скорее не будет, а так как я с JS вообще не дружу, кажется, что лучше будет вставить несколько раз)

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

Andrew, https://codepen.io/anon/pen/KQXmew

[tema_sun]

Артём Цымбалюк, концептуально, так https://codepen.io/anon/pen/PQJmgg

Answer 1

[Andrew]

<div class="qcont">
    <div class="1">
      <div class="quest">Вопрос 1</div>
      <div class="answ">Ответ 1</div>
    </div>
    <div class="2">
      <div class="quest">Вопрос 2</div>
      <div class="answ">Ответ 2</div>
    </div>
    <div class="3">
      <div class="quest">Вопрос 3</div>
      <div class="answ">Ответ 3</div>
    </div>
  </div>

$('.qcont').children().click(function() {
        $('.answ').hide();
        $(this).find('.answ').show();
      });

Хоть 500 вопросов. Или если не хотите оборачивать в какой-то общий контейнер - дайте им класс общий, тогда будет так:

$('.etot_class').click(function() {
        $('.answ').hide();
        $(this).find('.answ').show();
      });

Comments

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

Andrew но если нажать, на тот же вопрос который вы открывали, он его не закроет

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

Не совсем то, но решением тоже можно считать

Answer 2

[tyzberd]

https://codepen.io/anon/pen/LQzLzM

Comments

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

tyzberd то что нужно! Спасибо!

И такой вопросик, у меня в классе .quest есть ещё два класса
.open
.close

То есть, это кнопки открыть закрыть (графические)
Как сделать, что бы при открытом вопросе был класс .close
А при закрытом .open?

[tyzberd]

тогда так и привязывайтесь через классы
https://codepen.io/anon/pen/KQyJYP

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

tyzberd
Спасибо огромное!!!

Answer 3

[Алексей Орлов]

Легче всего начать использовать Bootstrap. Есть готовое решение.

Comments

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

Алексей Орлов это крутое решение, но к сожалению, сейчас вставить Bootstrap не получится..