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

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>

Answer 2

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>