javascript - 如何向 Accordion 添加 + 和 -

Question

我已经实现了一个基本的 Accordion ，我需要向 Accordion 添加+和-。

如果 Accordion 打开，那么“-”应该变成“+”

这是尝试过的:

JS:

$('.info').find('.accordion-toggle').click(function () {
    //Expand or collapse this panel
    $(this).next().slideToggle('fast');
    //Hide the other panels
    $(".accordion-content").not($(this).next()).slideUp('fast');
}); 

Demo Link

Answer 1

您可以使用 css 伪元素，如下所示:

CSS:

.accordion-toggle::after {
  content:"+";
}
.accordion-toggle.open::after {
  content:"-";
}

JS:

$('.info').find('.accordion-toggle').click(function () {
  //Expand or collapse this panel
  $(this).toggleClass("open").next().slideToggle('fast');

  //Hide the other panels
  $(".accordion-toggle").not($(this)).removeClass("open");
  $(".accordion-content").not($(this).next()).slideUp('fast');
});

Demo