Bootstrap collapse / hide when click outside with jquery

Question

I have created a portfolio page where I'm trying to use bootstrap's collapse function. It works fine, but when one of divs is open and you click on another, the first one stays open and so on! I can leave it like that but it just looks bad. :)

Here is my code:

<div class="col-md-4">
<a data-toggle="collapse" data-target="#project-1">
 <figure><img src="images/work/2.jpg" alt="" class="img-responsive"></figure>
</a>        

And the collapse div:

<div class="row">
 <div class="project-info collapse animated fadeInRightBig" id="project-1">
    <div class="col-md-6">
       <figure><img src="images/work/2.jpg" alt="" class="img-responsive"></figure>
    </div> 

    <div class="col-md-6">
     <button class="btn btn-primary" data-toggle="collapse" data-target="#project-1">Close</button>
        <h3>This is My Project Description</h3>
    </div>
</div>

There are a few thumbnails in orders like project-1, project-2, project-3.

Answer 1

Assuming you're using Bootstrap 3, you just need to make sure all collapses are inside the same .panel-group .

See the example in the Bootstrap 3 docs.

Like this:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit
      </div>
    </div>
  </div>
</div>

JSFiddle