Open current accordion on click button , close other opened dynamically using jqwery

125 views Asked by At

I have a multiple div in the form. On click button, we open accordion. When I'm in second accordion , the first should be closed dynamically.

For moment , in click current button to open accordion , the last accordion clicked still opened .

<form name="form" id="formId">
    <div class="form-group">
        <button type="button" class="filtre-collapse departement accordion collapsed" data-toggle="collapse" data-parent="#form" aria-expanded="false" aria-controls="departement">
            Form group 1 <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false"></i>
        </button>

        <div id="form-group1" class="collapse">
            <fieldset>
                <div class="checkbox-option">
                    <label class="option"><span>vehicle1 </span> <input type="checkbox" name="" value="" /> </label>
                </div>
                <div class="checkbox-option">
                    <label class="option"><span>vehicle2 </span> <input type="checkbox" name="" value="" /> </label>
                </div>
            </fieldset>
        </div>
    </div>

    <div class="form-group">
        <button type="button" class="filtre-collapse departement accordion collapsed" data-toggle="collapse" data-parent="#form" aria-expanded="false" aria-controls="departement">
            Form group 2 <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false"></i>
        </button>

        <div id="form-group2" class="collapse">
            <fieldset>
                <div class="checkbox-option">
                    <label class="option"><span>vehicle1 </span> <input type="checkbox" name="" value="" /> </label>
                </div>
                <div class="checkbox-option">
                    <label class="option"><span>vehicle2 </span> <input type="checkbox" name="" value="" /> </label>
                </div>
            </fieldset>
        </div>
    </div>

    <div class="form-group">
        <button type="button" class="filtre-collapse departement accordion collapsed" data-toggle="collapse" data-parent="#form" aria-expanded="false">
            Form group 3<i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false"></i>
        </button>

        <div id="form-group3" class="collapse">
            <fieldset>
                <div class="checkbox-option">
                    <label class="option"><span>vehicle1 </span> <input type="checkbox" name="" value="" /> </label>
                </div>
                <div class="checkbox-option">
                    <label class="option"><span>vehicle2 </span> <input type="checkbox" name="" value="" /> </label>
                </div>
            </fieldset>
        </div>
    </div>
</form>
0

There are 0 answers