如何从此代码创建手风琴

Question

我在尝试在此代码结构上创建手风琴时遇到问题。我已经尝试了以下代码，但无法正常工作。

var allPanels = $('.abc').hide();

$('.click_acc').click(function() {
  //alert("thanks");
  allPanels.slideUp();
  $(this).parent().next().slideDown();
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  this is a faq question 1
  <span class="readLinkTag">
    <a class="click_acc" href="#">
      READ MORE 
      <i class="fa fa-chevron-circle-down"></i>
    </a>
  </span>
  <div class="abc">
    this is answer of faq question 1
  </div>
</li>
<li>
  this is a faq question 2
  <span class="readLinkTag">
    <a class="click_acc" href="#">
      READ MORE 
      <i class="fa fa-chevron-circle-down"></i>
    </a>
  </span>
  <div class="abc">
    this is answer of faq question 2
  </div>
</li>

Answer 1

您可以使用以下代码显示隐藏和更改箭头：

-(?![a-zA-Z])

Answer 2

使用slideToggle而不是slideUp和SlideDown

var allPanels = $('.abc').hide();

$('.click_acc').click(function() {
  //alert("thanks");

  $(this).parent().next().slideToggle();
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  this is a faq question 1
  <span class="readLinkTag">
    <a class="click_acc" href="#">
      READ MORE 
      <i class="fa fa-chevron-circle-down"></i>
    </a>
  </span>
  <div class="abc">
    this is answer of faq question 1
  </div>
</li>
<li>
  this is a faq question 2
  <span class="readLinkTag">
    <a class="click_acc" href="#">
      READ MORE 
      <i class="fa fa-chevron-circle-down"></i>
    </a>
  </span>
  <div class="abc">
    this is answer of faq question 2
  </div>
</li>