动态数据的打开/关闭手风琴 jquery

Question

I have dynamic data, in click some button open accordion then closes it. The problem is when an accordion is opened the others should be closed. In my case, the accordion is opened and clicked only on click the same button.How I can do to close accordions when the current is opened.It begins from "form-group-1". The inspect html is like this:

<form name="filter" id="filter" class="filter-desktop">
    <div class="form-group">
        <button type="button" class="filtre-collapse activite accordion collapsed" data-toggle="collapse" data-target="#activity" data-parent="#filter" aria-expanded="false" aria-controls="activity">
            Secteurs  <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false" aria-controls="activity"></i>
        </button>
        <span class="selected-slide"></span>
        <hr />

        <div id="activity" class="collapse">
            <fieldset>
                <div class="checkbox-option">
                    <label class="option"><span>Achats</span><input id="input-activity" type="radio" name="activity[]" value="165" /> </label>
                </div>
                
            </fieldset>
        </div>
    </div>

    <div class="form-group" id="form-group-1">
        <button
            type="button"
            class="filtre-collapse speciality accordion collapsed"
            data-toggle="collapse"
            data-target="#speciality"
            data-parent="#filter"
            aria-expanded="false"
            aria-controls="speciality"
            disabled="disabled"
            style="cursor: not-allowed; color: grey;"
        >
            Spécialités <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false" aria-controls="speciality"></i>
        </button>

        <div id="speciality" class="collapse">
            <fieldset></fieldset>
        </div>
    </div>

    <div class="form-group" id="form-group-2">
        <button type="button" class="filtre-collapse contrat accordion collapsed" data-toggle="collapse" data-target="#contrat" data-parent="#filter" aria-expanded="false" aria-controls="contrat">
            Type de contrat <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="true" aria-controls="contrat"></i>
        </button>

        <div id="contrat" class="collapse">
            <fieldset>
                <div class="checkbox-option">
                    <label class="option"><span>CDD </span><input id="input-contrat" type="checkbox" name="contrat[]" value="8" /> </label>
                </div>
                <div class="checkbox-option">
                    <label class="option"><span>CDI </span><input id="input-contrat" type="checkbox" name="contrat[]" value="9" /> </label>
                </div>
            </fieldset>
        </div>
    </div>

    <div class="form-group" id="form-group-3">
        <button type="button" class="filtre-collapse region accordion collapsed" data-toggle="collapse" data-target="#region" data-parent="#filter" aria-expanded="false" aria-controls="region">
            Régions <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false" aria-controls="region"></i>
        </button>

        <div id="region" class="collapse">
            <fieldset>
                <div class="checkbox-option">
                    <label class="option"><span>Paris </span> <input id="input-region" type="checkbox" name="region[]" value="10" /> </label>
                </div>
 
               
            </fieldset>
        </div>
    </div>

    <div class="form-group" id="form-group-4">
        <button type="button" class="filtre-collapse departement accordion collapsed" data-toggle="collapse" data-target="#departement" data-parent="#filter" aria-expanded="false" aria-controls="departement">
            Départements <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false" aria-controls="departement"></i>
        </button>

        <div id="departement" class="collapse" style="">
            <fieldset>
                <div class="checkbox-option">
                    <label class="option"><span>Ain </span> <input id="input-departement" type="checkbox" name="departement[]" value="128" /> </label>
                </div>
                
            </fieldset>
        </div>
    </div>


</form>

<script>
jQuery("button.filtre-collapse").click(function () {
            
            if (jQuery(this).hasClass("collapsed")) {
                jQuery(this).find("i").removeClass();
                jQuery(this).find("i").addClass("fa fa-chevron-down");

            } else {

                jQuery(this).find("i").removeClass();
                jQuery(this).find("i").addClass("fa fa-chevron-right");
            }
        })
</script>

Answer 1

Just add $(".collapse").removeClass("show"); this line in button click event.

 $("button.filtre-collapse").click(function () { $(".collapse").removeClass("show"); if ($(this).hasClass("collapsed")) { $(this).find("i").removeClass(); $(this).find("i").addClass("fa fa-chevron-down"); } else { $(this).find("i").removeClass(); $(this).find("i").addClass("fa fa-chevron-right"); } })

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <form name="filter" id="filter" class="filter-desktop"> <div class="form-group"> <button type="button" class="filtre-collapse activite accordion collapsed" data-toggle="collapse" data-target="#activity" data-parent="#filter" aria-expanded="false" aria-controls="activity"> Secteurs <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false" aria-controls="activity"></i> </button> <span class="selected-slide"></span> <hr /> <div id="activity" class="collapse"> <fieldset> <div class="checkbox-option"> <label class="option"><span>Achats</span><input id="input-activity" type="radio" name="activity[]" value="165" /> </label> </div> </fieldset> </div> </div> <div class="form-group" id="form-group-1"> <button type="button" class="filtre-collapse speciality accordion collapsed" data-toggle="collapse" data-target="#speciality" data-parent="#filter" aria-expanded="false" aria-controls="speciality" disabled="disabled" style="cursor: not-allowed; color: grey;" > Spécialités <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false" aria-controls="speciality"></i> </button> <div id="speciality" class="collapse"> <fieldset></fieldset> </div> </div> <div class="form-group" id="form-group-2"> <button type="button" class="filtre-collapse contrat accordion collapsed" data-toggle="collapse" data-target="#contrat" data-parent="#filter" aria-expanded="false" aria-controls="contrat"> Type de contrat <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="true" aria-controls="contrat"></i> </button> <div id="contrat" class="collapse"> <fieldset> <div class="checkbox-option"> <label class="option"><span>CDD </span><input id="input-contrat" type="checkbox" name="contrat[]" value="8" /> </label> </div> <div class="checkbox-option"> <label class="option"><span>CDI </span><input id="input-contrat" type="checkbox" name="contrat[]" value="9" /> </label> </div> </fieldset> </div> </div> <div class="form-group" id="form-group-3"> <button type="button" class="filtre-collapse region accordion collapsed" data-toggle="collapse" data-target="#region" data-parent="#filter" aria-expanded="false" aria-controls="region"> Régions <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false" aria-controls="region"></i> </button> <div id="region" class="collapse"> <fieldset> <div class="checkbox-option"> <label class="option"><span>Paris </span> <input id="input-region" type="checkbox" name="region[]" value="10" /> </label> </div> </fieldset> </div> </div> <div class="form-group" id="form-group-4"> <button type="button" class="filtre-collapse departement accordion collapsed" data-toggle="collapse" data-target="#departement" data-parent="#filter" aria-expanded="false" aria-controls="departement"> Départements <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false" aria-controls="departement"></i> </button> <div id="departement" class="collapse" style=""> <fieldset> <div class="checkbox-option"> <label class="option"><span>Ain </span> <input id="input-departement" type="checkbox" name="departement[]" value="128" /> </label> </div> </fieldset> </div> </div> </form>