how can i remove class active from a button after getting clicked again while it's active with JS

Question

I have two buttons that they're going to show some content after getting clicked each one. the buttons are inactive at first. after getting hovered and clicked, they'll get the active class. the problem is by clicking on the active button again, it's going to collapse the div element which is ok but that active button doesn't get inactive after getting clicked for the second time.

and keep in mind that my collapse part is not working properly in snippet which I don't know why ( actually it's working perfectly in my project) and it's not a very important issue cos it doesn't affect the main issue I discussed above. so the question is: how can I inactivate the active button after getting clicked for the second time cos it's gonna collapse its div element so basically when the specified div element is collapsed, its button shouldn't be active anymore. does anybody know where my mistake is?

 $(document).on('click', '#Resume-items li', function () { $(this).addClass('active').siblings().removeClass('active'), document.getElementsByClassName('.Resume-click-open').style.height = '100px' }); jQuery('.btn-Resume-buttons').click(function (e) { jQuery('.collapse').collapse('hide'); });

 #Resume-items { list-style: none; text-align: center; } #Resume-items li { display: inline-block; margin: 15px 25px; } #Resume-items.btn { color: black; background: rgba(168, 198, 222, 0.4); cursor: pointer; position: relative; outline: none; border: none; padding: 0.9rem 1.8rem; font-size: 16px; }.btn.btn-Resume-buttons::before { content: ''; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; position: absolute; background-color: black; transform: scaleX(0); transition: transform 300ms ease-in-out; transform-origin: left; }.btn.btn-Resume-buttons { transition: color 300ms ease-in-out; z-index: 1; position: relative; }.btn.btn-Resume-buttons:hover::before, .btn.btn-Resume-buttons:focus::before { transform: scaleX(1); box-shadow: 0 2px 6px black; }.btn.btn-Resume-buttons:hover, .btn.btn-Resume-buttons:focus { color: #dae7f1;important. } #Resume-items li.active.btn:btn-Resume-buttons { background; black: color; #dae7f1. }:Resume-click-open { max-width; 100%: border; none: margin; 0 auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg-12 panel-group fade-in-resume" id="accordion"> <div class="panel justify-content-center"> <ul id="Resume-items"> <li class="panel-title"> <button data-toggle="collapse" data-parent="#accordion" class="btn btn-Resume-buttons" href="#test1">test 1 </button> </li> <li class="panel-title"> <button data-toggle="collapse" data-parent="#accordion" class="btn btn-Resume-buttons" href="#Test2">Test 2 </button> </li> </ul> </div> <div class="Resume-click-open row"> <div id="test1" class="panel-collapse collapse"> something1 </div> <div id="test2" class="panel-collapse collapse"> something2 </div> </div> </div>

Answer 1

try thisL

Jquery:

    $(document).ready(function () {
    $('body').on('click', '.btn', function(){
        $(".btn").not(this).removeClass('active');
        if($(this).hasClass('active')){
            $('.Resume-click-open').css({'height' : '100px'});
            $(this).removeClass('active');
        }else{
            $(this).addClass('active');
        }
    });

    $('.btn-Resume-buttons').click(function(e){
        $('.collapse').collapse('hide');
    });
});

HTML:

<div class="col-lg-12 panel-group fade-in-resume" id="accordion">
    <div class="panel justify-content-center">
        <ul id="Resume-items">
            <li class="panel-title">
                <button data-toggle="collapse" data-parent="#accordion" class="btn btn-Resume-buttons" href="#test1">test 1</button>
            </li>
            <li class="panel-title">
                <button data-toggle="collapse" data-parent="#accordion" class="btn btn-Resume-buttons" href="#Test2">Test 2</button>
            </li>
        </ul>
    </div>
            
    <div class="Resume-click-open row">
        <div id="test1" class="panel-collapse collapse">
            something1
        </div>

        <div id="test2" class="panel-collapse collapse">
            something2
        </div>
    </div>
</div>

CSS:

#Resume-items {
    list-style: none;
    text-align: center;
}

#Resume-items li {
    display: inline-block;
    margin: 15px 25px;

}

#Resume-items .btn {
    color: black;
    background: rgba(168, 198, 222, 0.4);
    cursor: pointer;
    position: relative;
    outline: none;
    border: none;
    padding: 0.9rem 1.8rem;
    font-size: 16px;
    overflow:hidden;
    transition: all 0.3s ease-in-out;
    z-index:1;
}

.btn:hover {
    color: #dae7f1 !important;
}

.btn.btn-Resume-buttons::before {
    content: '';
    width:0;
    min-height:100%;
    position:absolute;
    left: 0;
    top: 0;
    z-index:-1;
    transition: all 0.3s ease-in-out;
    background-color: #000;
}

.btn.btn-Resume-buttons:hover::before {
    color: #dae7f1 !important;
    width:100%;
}

.btn.active {
    background: #00b32d !important;
    color: #dae7f1 !important;
}

.Resume-click-open {
    max-width: 100%;
    border: none;
    margin: 0 auto;
}