Bootstrap - display only one collapse at a time only in a specific section

Question

I have a custom built section in boostrap with 6 cards, and each card got its own full-width collapse below it,

I woud like that only one collapsed item to be showed at a time when the cards are clicked;

This is how the structure looks like, X marks that, if you visited collapse1, collapse2, and collapse3 only the third elements dropdown needs to be shown:

The HTML structure:

<div class="container hardware-section"> 
      <div class="row">
        <div class="single-hardware">
            <div class="col-md-2" >
                <a href="#first-hardware" data-toggle="collapse" id="hardwareSection">
                    <img src="img/sample-hardware.png" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>

        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#sec-hardware" data-toggle="collapse" id="hardwareSection">
                    <img src="img/sample-hardware.png" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#thr-hardware" data-toggle="collapse" id="hardwareSection">
                    <img src="img/sample-hardware.png" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#for-hardware" data-toggle="collapse" id="hardwareSection">
                    <img src="img/sample-hardware.png" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#fiv-hardware" data-toggle="collapse" id="hardwareSection">
                    <img src="img/sample-hardware.png" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#six-hardware" data-toggle="collapse" id="hardwareSection">
                    <img src="img/sample-hardware.png" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
      </div>  <!-- Product display row end --> 

      <div class="row hardware-info-container">
                <div id="first-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..1..</p>
                </div>            
                <div id="sec-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..2..</p>
                </div>
                <div id="thr-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..3..</p>
                </div>
                <div id="for-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..4..</p>
                </div>
                <div id="fiv-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..5..</p>
                </div>
                <div id="six-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..6..</p>
                </div>
      </div>
  </div>

If you can help me with a jsfiddle example too it would be great.

Best regards

Answer 1

This is simple ,

First you have a symantic error whaen using multiple id with the same name , so revert them as class like id=hardwareSection should be class=hardwareSection ,

So every click on hardwareSection link you should remove the in class from all the class='hardware-info' div except the element with same hardwareSection div clicked element index using jQuery like below

$(".hardwareSection").on("click",function(e,i){
     var index  = $('.hardwareSection').index(this);
     $(".hardware-info").not($(".hardware-info").eq(index)).removeClass("in");
})

see below working Snippet :

$(function(){
  $(".hardwareSection").on("click",function(e,i){
    var index  = $('.hardwareSection').index(this);
    $(".hardware-info").not($(".hardware-info").eq(index)).removeClass("in");
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container hardware-section"> 
      <div class="row">
        <div class="single-hardware">
            <div class="col-md-2" >
                <a href="#first-hardware" data-toggle="collapse" class="hardwareSection">
                    <img src="https://i.ebayimg.com/images/g/kDwAAOSwYK1bE8Oq/s-l225.jpg" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>

        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#sec-hardware" data-toggle="collapse" class="hardwareSection">
                    <img src="https://i.ebayimg.com/images/g/kDwAAOSwYK1bE8Oq/s-l225.jpg" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#thr-hardware" data-toggle="collapse" class="hardwareSection">
                    <img src="https://i.ebayimg.com/images/g/kDwAAOSwYK1bE8Oq/s-l225.jpg" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#for-hardware" data-toggle="collapse" class="hardwareSection">
                    <img src="https://i.ebayimg.com/images/g/kDwAAOSwYK1bE8Oq/s-l225.jpg" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#fiv-hardware" data-toggle="collapse" class="hardwareSection">
                    <img src="https://i.ebayimg.com/images/g/kDwAAOSwYK1bE8Oq/s-l225.jpg" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#six-hardware" data-toggle="collapse" class="hardwareSection">
                    <img src="https://i.ebayimg.com/images/g/kDwAAOSwYK1bE8Oq/s-l225.jpg" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
      </div>  <!-- Product display row end --> 

      <div class="row hardware-info-container">
                <div id="first-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..1..</p>
                </div>            
                <div id="sec-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..2..</p>
                </div>
                <div id="thr-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..3..</p>
                </div>
                <div id="for-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..4..</p>
                </div>
                <div id="fiv-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..5..</p>
                </div>
                <div id="six-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..6..</p>
                </div>
      </div>
  </div>

Answer 2

Not added extra CSS or HTML just added few jquery codes. hope this will helps. Also added class "in" first description container to show the first container by default

$(document).ready(function(){
	$(document).on('click','.single-hardware a',function(){
		ref = $(this).attr('href');
		$('.collapse').removeClass('in');
		$('.hardware-info-container').find(ref).addClass('in');
	})
});
</script>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container hardware-section"> 
      <div class="row">
        <div class="single-hardware">
            <div class="col-md-2" >
                <a href="#first-hardware" data-toggle="collapse " id="hardwareSection">
                    <img src="img/sample-hardware.png" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>

        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#sec-hardware" data-toggle="collapse" id="hardwareSection">
                    <img src="img/sample-hardware.png" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#thr-hardware" data-toggle="collapse" id="hardwareSection">
                    <img src="img/sample-hardware.png" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#for-hardware" data-toggle="collapse" id="hardwareSection">
                    <img src="img/sample-hardware.png" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#fiv-hardware" data-toggle="collapse" id="hardwareSection">
                    <img src="img/sample-hardware.png" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
        <div class="single-hardware">
            <div class="col-md-2">
                <a href="#six-hardware" data-toggle="collapse" id="hardwareSection">
                    <img src="img/sample-hardware.png" alt="Product Image">
                    <h4 class="single-hardware-title">Procut title</h4>
                </a>
            </div>
        </div>
      </div>  <!-- Product display row end --> 

      <div class="row hardware-info-container">
                <div id="first-hardware" class="collapse in  hardware-info">
                        <p>Lorem ipsum dolor text..1..</p>
                </div>            
                <div id="sec-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..2..</p>
                </div>
                <div id="thr-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..3..</p>
                </div>
                <div id="for-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..4..</p>
                </div>
                <div id="fiv-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..5..</p>
                </div>
                <div id="six-hardware" class="collapse hardware-info">
                        <p>Lorem ipsum dolor text..6..</p>
                </div>
      </div>
  </div>