Collapse all before expanding in Bootstrap 5-CodePudding

I have buttons that expands and collapses divs. And I need to add some javascript that collapses all expanded ones before expanding the one.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<button 
    data-bs-toggle="collapse" data-bs-target="#resize-form"
    aria-expanded="false" aria-controls="resize-form" title="Resize">
    Resize
 </button>     
 
 <button 
    data-bs-toggle="collapse" data-bs-target="#brightness-form"
    aria-expanded="false" aria-controls="resize-form" title="Resize">
    Brightness
 </button>     
 
 <div id="resize-form"  style="background: red">
    <p>Resize</p>
 </div>
  <div id="brightness-form" >
   <p>
    Brightness
  </p>
 </div>

Whats needed to collapse all open ones before expanding?

CodePudding user response：

<script>
   $(function() {
       $("button").click(function(){
           $(".collapse").removeClass("show");
         });            
   });
</script>