Javascript 一次打开多个手风琴的功能，以及打开和关闭手风琴的动画图标

任何添加功能的人都可以一次打开多个手风琴，或单击关闭。打开和关闭的图标，如+&-符号

这里是HTML

<div id="wrapper">
    <div class="accordionButton">Button 1 Content</div>
    <div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>
    <div class="accordionButton">Button 2 Content</div>
    <div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>
    <div class="accordionButton">Button 3 Content</div>
    <div class="accordionContent">Content 1<br />Short Example</div>
    <div class="accordionButton">Button 4 Content</div>
    <div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div>
</div>

---

和小提琴

这会让你走上正确的方向：

<div class="wrapper">
    <div id="accordion1" class="accordion-item">
        <div class="accordion-item-header">
            <a data-accordion="" href="#accordion1">Button 1</a>
        </div>
        <div class="accordion-item-body">
            content...
        </div>
    </div>
</div>

小提琴：

---

更新的小提琴：

你好，谢谢。但是当我们打开另一个accordion时，上一个活动的手风琴图标-没有变回+。有什么解决办法吗？谢谢…哦，真的很抱歉，刚从手风琴项目中删除了。活动类。更新我的小提琴，干杯。嗨@Varinder，你在吗？

<div class="wrapper">
    <div id="accordion1" class="accordion-item">
        <div class="accordion-item-header">
            <a data-accordion="" href="#accordion1">Button 1</a>
        </div>
        <div class="accordion-item-body">
            content...
        </div>
    </div>
</div>

jQuery(function() {

    $("[data-accordion]").on("click.accordion", function(e, suppress) {
        e.preventDefault();
        var $this = $(this);
        var accordionElement = $this.attr("href");
        var $accordionElement = $( accordionElement );

        if ( !$accordionElement.hasClass("active") ) {
            if ( suppress == undefined ) {
                $(".accordion-item.active .accordion-item-body").slideUp();
            }
            $accordionElement.addClass("active").find(".accordion-item-body").slideDown();
        } else {
            $accordionElement.removeClass("active").find(".accordion-item-body").slideUp();
        }

    });

    $("[data-accordion-control]").on("click", function(e) {
        e.preventDefault();
        var $this = $(this);
        var accordionElements = $this.attr("data-accordion-control");

        $(".accordion-item").removeClass("active");

        if ( accordionElements != "" ) {
            $(accordionElements).each(function() {
                $(this).find("[data-accordion]").trigger("click.accordion", "suppressSlideUp");
            });
        } else {
            $("[data-accordion]").trigger("click.accordion", "suppressSlideUp")
        }
    });    

});