<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="panel-group" id="accordion"> <div class="panel panel-default panel-lv1" id="panel_id_bg"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-target="#collapse_id_bg" href="#collapse_id_bg" class="collapsed"> Identification & Background </a> </h4> </div> <div id="collapse_id_bg" class="panel-collapse collapse"> <div class="panel panel-default panel-lv2" id="panel_identity"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-target="#collapse_identity" href="#collapse_identity" class="collapsed"> Identity </a> </h4> </div> <div id="collapse_identity" class="panel-collapse collapse"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="identity_first_name">First Name</label> <div class="col-md-4"> <input id="identity_first_name" name="identity_first_name" placeholder="first name" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="identity_last_name">Last Name</label> <div class="col-md-4"> <input id="identity_last_name" name="identity_last_name" placeholder="last name" class="form-control input-md" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="identity_uid">UID</label> <div class="col-md-4"> <input id="identity_uid" name="identity_uid" placeholder="uid" class="form-control input-md" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="identity_telephone">Telephone</label> <div class="col-md-4"> <input id="identity_telephone" name="identity_telephone" placeholder="telephone" class="form-control input-md" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="identity_ig_entry_date">IG entry date</label> <div class="col-md-4"> <input id="identity_ig_entry_date" name="identity_ig_entry_date" placeholder="" class="form-control input-md" type="text"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="identity_country_of_origin">Country of origin</label> <div class="col-md-4"> <select id="identity_country_of_origin" name="identity_country_of_origin" class="form-control"> <option value="1">France</option> <option value="2">Allemagne</option> <option value="">Japon</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="identity_igc_hub">IGC/Hub</label> <div class="col-md-4"> <select id="identity_igc_hub" name="identity_igc_hub" class="form-control"> <option value="1">hub france</option> <option value="2">hub afrique</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="identity_country_of_residence">Country of residence</label> <div class="col-md-4"> <select id="identity_country_of_residence" name="identity_country_of_residence" class="form-control"> <option value="1">France</option> <option value="2">Italie</option> <option value="">Belgique</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="identity_geographical_mobility">Geographical mobility</label> <div class="col-md-4"> <select id="identity_geographical_mobility" name="identity_geographical_mobility" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Status within IG</label> <div class="col-md-4"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Filière</label> <div class="col-md-4"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Manager</label> <div class="col-md-4"> <input id="textinput" name="textinput" placeholder="" class="form-control input-md" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Corporate title</label> <div class="col-md-4"> <input id="textinput" name="textinput" placeholder="" class="form-control input-md" type="text"> </div> </div> </fieldset> </form> </div> </div> </div> </div> <div class="panel panel-default panel-lv1" id="panel_training"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-target="#collapse_training" href="#collapse_training" class="collapsed"> Training </a> </h4> </div> <div id="collapse_training" class="panel-collapse collapse"> </div> </div> <div class="panel panel-default panel-lv1" id="panel_tech_skill"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-target="#collapse_tech_skill" href="#collapse_tech_skill" class="collapsed"> Technical skills </a> </h4> </div> <div id="collapse_tech_skill" class="panel-collapse collapse"> </div> </div> <div class="panel panel-default panel-lv1" id="panel_soft_skill"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-target="#collapse_soft_skill" href="#collapse_soft_skill" class="collapsed"> Soft skills </a> </h4> </div> <div id="collapse_soft_skill" class="panel-collapse collapse"> </div> </div> <div class="panel panel-default panel-lv1" id="panel_misc"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-target="#collapse_misc" href="#collapse_misc" class="collapsed"> Miscellaneous </a> </h4> </div> <div id="collapse_misc" class="panel-collapse collapse"> </div> </div> <div class="panel panel-default panel-lv1" id="panel_keyw"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-target="#collapse_keyw" href="#collapse_keyw" class="collapsed"> Key words </a> </h4> </div> <div id="collapse_keyw" class="panel-collapse collapse"> </div> </div> </div> <br/> <input class="btn btn-primary" type="submit" value="Modifier"> </div>

.panel-heading a:after { font-family:'Glyphicons Halflings'; content:"\e114"; float: right; color: grey; } .panel-heading a.collapsed:after { content:"\e080"; } .panel-lv1 { width:1000px; } .panel-lv2 { width:800px; margin-left: auto; margin-right: auto; margin-top : 1em; }