как я могу изменить дочерний узел css?

Question

Я пытаюсь включить функцию просмотра / скрытия в своих часто задаваемых вопросах, но, тем не менее, в настоящий момент при попытке доступа к моему ребенку answers_body с помощью children я получил ошибку. children is not a function, как мне правильно получить доступ к answers_body, чтобы изменить display:none на display:block

<section class="faqs">
  <div class="accordion row">
      <div class="__block col-lg-7 mx-auto py-3">
          <div class="row justify-content-between align-items-start">
              <div class="col-11">
                  <h3 class="__question">
                      demo
                  </h3>
              </div>
              <div class="col-1">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12"><path fill="none" stroke="#5267DF" stroke-width="3" d="M1 1l8 8 8-8" /></svg>
              </div>
          </div>
          <div class="answers_body"> I want to access to this node in order to display it 
              <div class="col">
                  <p class="answer">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt justo eget ultricies fringilla. Phasellus blandit ipsum quis quam ornare mattis.
                  </p>
              </div>
          </div>
      </div>
</section>

$('.__question').click(function(){
  var $parent = $(this);
  console.log($patern[0].InnerText)
});

Answer 1

Если вы пытаетесь применить эффект переключения для часто задаваемых вопросов, вы можете попробовать следующее.

$('.__question').click(function() {
  var parent = $(this).parents('.accordion.row');
  if (parent.find('.answers_body').hasClass('answers-active')) {
    parent.find('.answers_body').removeClass('answers-active');
  } else {
    parent.find('.answers_body').addClass('answers-active');
  }
});

Здесь вам нужно найти родителя, который является общим для элемента, который вы щелкаете, и нужный вам элемент. Затем, используя метод .find(), вы можете настроить таргетинг на элемент и показать. Обратитесь к fiddle

UPDATE

Поскольку вы сказали, что это не работает, я думаю, что родительский класс, который используется для всех часто задаваемых вопросов, неверен. Если вы можете обновить код, я могу помочь с этим. В противном случае вы можете использовать следующий код.

$('.__question').click(function() {
  var parent = $(this).closest('.row').siblings('.answers_body');
  if (parent.hasClass('answers-active')) {
    parent.removeClass('answers-active');
  } else {
    parent.addClass('answers-active');
  }
});