$('.accordion').each(function () {
		    var $this = $(this);
		    $this.on("click", function () {
		        var el = $(this).data('target');
		        var panel = document.getElementById(el);
		        
		        panel.classList.add("active");
		        /*
		        if (panel.style.maxHeight) {
			    	panel.style.maxHeight = null;
			    } else {
			    	panel.style.maxHeight = panel.scrollHeight + "px";
			    }*/
		    });
		});
		
		
		
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.bundle.min.js"></script>

<div class="container py-4">
    <div class="row" id="row1">
        <div class="col-md-4 py-2">
            <div class="card card-body p-0">
                <a href="#detail1" data-toggle="collapse" aria-expanded="true">
                    <img src="//dummyimage.com/897x556.png/800080/ffffff?text=1" alt="an image here" class="img-fluid rounded-lg shadow-sm">
                </a>
            </div>
        </div>
        <div class="col py-2 order-md-last collapse fade show" id="detail1">
            <div class="card card-body">Here are the details for 1</div>
        </div>
        <div class="col-md-4 py-2">
            <div class="card card-body p-0">
                <a href="#detail2" data-toggle="collapse" aria-expanded="true">
                    <img src="//dummyimage.com/897x556.png/5fa2dd/ffffff?text=2" alt="an image here" class="img-fluid rounded-lg shadow-sm">
                </a>
            </div>
        </div>
        <div class="col py-2 order-md-last collapse fade" id="detail2">
            <div class="card card-body">Here is the full details for 2</div>
        </div>
        <div class="col-md-4 py-2">
            <div class="card card-body p-0">
                <a href="#detail3" data-toggle="collapse" aria-expanded="true">
                    <img src="//dummyimage.com/897x556.png/118080/ffffff?text=3" alt="an image here" class="img-fluid rounded-lg shadow-sm">
                </a>
            </div>
        </div>
        <div class="col py-2 order-md-last collapse fade" id="detail3">
            <div class="card card-body">full details 3</div>
        </div>
    </div>
    <div class="row d-flex" id="row2">
        <div class="col-md-4 py-2">
            <div class="card card-body p-0">
                <a href="#detail4" data-toggle="collapse" aria-expanded="true">
                    <img src="//dummyimage.com/897x556.png/808080/ffffff?text=4" alt="an image here" class="img-fluid rounded-lg shadow-sm">
                </a>
            </div>
        </div>
        <div class="col py-2 order-md-last collapse fade" id="detail4">
            <div class="card card-body">full details 4</div>
        </div>
        <div class="col-md-4 py-2">
            <div class="card card-body p-0">
                <a href="#detail5" data-toggle="collapse" aria-expanded="true">
                    <img src="//dummyimage.com/897x556.png/118080/ffffff?text=5" alt="an image here" class="img-fluid rounded-lg shadow-sm">
                </a>
            </div>
        </div>
        <div class="col py-2 order-md-last collapse fade" id="detail5">
            <div class="card card-body">full details 5</div>
        </div>
        <div class="col-md-4 py-2">
            <div class="card card-body p-0">
                <a href="#detail6" data-toggle="collapse" aria-expanded="true">
                    <img src="//dummyimage.com/897x556.png/808080/ffffff?text=6" alt="an image here" class="img-fluid rounded-lg shadow-sm">
                </a>
            </div>
        </div>
        <div class="col py-2 order-md-last collapse fade" id="detail6">
            <div class="card card-body">full details 6</div>
        </div>
    </div>
</div>

<script>
  $('[data-toggle="collapse"]').on('click',function(){
    $('.collapse.show').collapse('hide');
});
</script>