切换手风琴 plus/minus 图标

Question

我有一个可以工作的手风琴，我现在唯一的问题是当您 select 另一个手风琴 header.

时，从打开的面板中获取当前图标进行切换

当您单击已经 select 的手风琴 header 时，图标当前会切换。

非常感谢任何帮助，

HTML

<div class="description-container">

<div class="accordion">
   <h2 class="section-header">Heading 1</h2>
   <div class="panel">
      <p class="text-light">
      • Made from all-natural, sustainable, and non-splintering rock-hard maple wood that makes sore gums happy!
      • Non-toxic, untreated, & sealed with all-natural and eco-friendly beeswax
      • Naturally anti-bacterial
      • BPA & phthalate free (thank goodness!)
      • Intricately designed with love and sanded by hand
      • Made from scratch entirely in NYC, from start to finish
      </p>
   </div>
</div>
<div class="accordion">
   <h2 class="section-header">Heading 2</h2>
   <div class="panel">
      <p class="text-light">
      • Gift ready in unique recyclable packaging, featuring all of LexyPexy's exclusive (and cute!) designs
      </p>
   </div>
</div>

JQUERY

$(".section-header").addClass("closed");

$('.section-header').click(function() {
$(this).parent(".accordion").find('.panel').slideToggle();
$(this).parent(".accordion").siblings().find('.panel').slideUp();
$(this).toggleClass("closed active");
return false;
});

这是一个工作演示 - FIDDLE

Answer 1

1) 关闭所有其他 $('.section-header') 并删除 class active

2) 切换被点击的

这是一个演示：

$(".section-header").addClass("closed");

$('.section-header').click(function() {
  let $this = $(this);
  let $others = $(".section-header").not($this);
  
  $others.addClass("closed").removeClass('active');;
  $others.siblings().slideUp();

  $this.toggleClass("closed active");
  $this.siblings().slideToggle();

  return false;
});

body {
  font-family: Arial, Helvetica, sans-serif;
}

.accordion {
  width: 100%;
  border-bottom: 1px solid #000;
}

.accordion:first-child {
  border-top: 1px solid #000;
}

h2 {
  margin: 0;
  font-size: 16px;
  cursor: pointer;
  padding: 10px 0 10px 0;
}

.panel {
  display: none;
}

.section-header.active::after {
  content: "12";
  color: #000;
  display: block;
}

.section-header.closed::after {
  content: '[=11=]2B';
  color: #000;
}

.section-header::after {
  content: '[=11=]2B';
  color: #000;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="description-container">

  <div class="accordion">
    <h2 class="section-header">Heading 1</h2>
    <div class="panel">
      <p class="text-light">
        • Made from all-natural, sustainable, and non-splintering rock-hard maple wood that makes sore gums happy! • Non-toxic, untreated, & sealed with all-natural and eco-friendly beeswax • Naturally anti-bacterial • BPA & phthalate free (thank goodness!) •
        Intricately designed with love and sanded by hand • Made from scratch entirely in NYC, from start to finish
      </p>
    </div>
  </div>
  <div class="accordion">
    <h2 class="section-header">Heading 2</h2>
    <div class="panel">
      <p class="text-light">
        • Gift ready in unique recyclable packaging, featuring all of LexyPexy's exclusive (and cute!) designs
      </p>
    </div>
  </div>

</div>

Answer 2

仅此而已！

.ui-accordion .ui-accordion-header-active:after{
 float:right;
 content:"-";
}

.ui-accordion .ui-accordion-header-collapsed:after{
 float:right;
 content:"+";
}

切换手风琴 plus/minus 图标

Toggle Accordion plus/minus icon

jquery

accordion

toggle