How to open one question on click and close another?

Question

JavaScript

Hello
There is the following code:
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();
  });

That is, there are 3 blocks with questions and answers, now by clicking on one of the three blocks, the desired answer opens, but by clicking on another block, the previous answer does not close
Please tell me how to implement this?

Answer 1

<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();
      });

At least 500 questions. Or if you don’t want to wrap it in some kind of general container - give them a general class, then it will be like this:

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

Answer 2

The easiest way to get started is with Bootstrap. There is a ready solution .