Multiple collapse bootstrap 3.3.4 - html

Question

Here is my issue, I would like to get a closed collapse on each project (h3) I know the first one has to be open, but I would like all the others to be closed. Actually, the collapse is working, but they are all "open"
I tried to minimize the code to let you see the most relevant so as you can see there is only 2 project but I can have more than a hundred I removed the php because he build what you can see there.
<div class="categorie">
<div class="row">
<div class="col-xs-12">
<div class="well-header" data-toggle="collapse" data-target=".collapse-csnm" aria-expanded="false" aria-controls="livraison_1_0 ">
<h3>CSNM</h3>
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</div>
<div class="well well-white test collapse-csnm in" id="livraison_1_0"
<div class="well-content">
<div class="row">
<blockquote class="recap">
<p class="labels">
<span class="label label-primary">Développement</span>
<span class="label label-default">Url</span>
<span id="state-projetcheklist-1" class="state state-nosmile"></span>
</p>
<p data-toggle="collapse" href="#site-1" aria-expanded="false" aria-controls="site">
Content
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="categorie">
<div class="row">
<div class="col-xs-12">
<div class="well-header" data-toggle="collapse" data-target=".collapse-salt-travel" aria-expanded="false" aria-controls="livraison_3_0 ">
<h3>Salt Travel</h3>
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</div>
<div class="well well-white test collapse-salt-travel in" id="livraison_3_0" <div class="well-content">
<div class="row">
<blockquote class="recap">
<p class="labels">
<span class="label label-primary">Intégration</span>
<span class="label label-default">Url</span>
<span id="state-projetcheklist-3" class="state state-nosmile"></span>
</p>
<p data-toggle="collapse" href="#structure-accueil-3" aria-expanded="false" aria-controls="structure-accueil">
Content
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
So do you know what to do to get the first one opened and all others closed ?
Thanks for you help.

Answer 1

There is a little mistake in your HTML replace all in class with collapse at div who has class well
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="categorie">
<div class="row">
<div class="col-xs-12">
<div class="well-header" data-toggle="collapse" data-target=".collapse-csnm" aria-expanded="false" aria-controls="livraison_1_0 ">
<h3>CSNM</h3>
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</div>
<div class="well well-white test collapse-csnm collapse" id="livraison_1_0"
<div class="well-content">
<div class="row">
<blockquote class="recap">
<p class="labels">
<span class="label label-primary">Développement</span>
<span class="label label-default">Url</span>
<span id="state-projetcheklist-1" class="state state-nosmile"></span>
</p>
<p data-toggle="collapse" href="#site-1" aria-expanded="false" aria-controls="site">
Content
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="categorie">
<div class="row">
<div class="col-xs-12">
<div class="well-header" data-toggle="collapse" data-target=".collapse-salt-travel" aria-expanded="false" aria-controls="livraison_3_0 ">
<h3>Salt Travel</h3>
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</div>
<div class="well well-white test collapse-salt-travel collapse" id="livraison_3_0" <div class="well-content">
<div class="row">
<blockquote class="recap">
<p class="labels">
<span class="label label-primary">Intégration</span>
<span class="label label-default">Url</span>
<span id="state-projetcheklist-3" class="state state-nosmile"></span>
</p>
<p data-toggle="collapse" href="#structure-accueil-3" aria-expanded="false" aria-controls="structure-accueil">
Content
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>