<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="panel-group" ng-repeat="node in selectedNodes | reverse"> <div class="panel panel-info"> <div class="panel-heading" data-toggle="collapse" data-target="#detailPanel_1" style="cursor:pointer"> <h4 class="panel-title"> Open and close by clicking on panel-heading </h4> </div> <div id="detailPanel_1" class="panel-collapse collapse in" aria-expanded="true"> <div class="panel-body"> <!-- Nav tabs --> <div class="card"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#tab_971ee760232d0a348462f21f778d5592_Stikkordvalg" id="StikkordTab" prevent-default="" aria-controls="Stikkordvalg" role="tab" data-toggle="tab">Stikkordvalg</a> </li> <!-- ngRepeat: t in node.detailData.Matrisevalg --> </ul> <div class="tab-content" style="margin-top:15px"> <div role="tabpanel" class="tab-pane active" id="tab_971ee760232d0a348462f21f778d5592_Stikkordvalg"> <!-- ngRepeat: s in node.detailData.Stikkordvalg --> <div class="form-group" ng-repeat="s in node.detailData.Stikkordvalg"> <label for="Lokalisering:">Lokalisering:</label> <input type="text" class="form-control" id="Lokalisering:" value="Ikke relevant"> </div><!-- end ngRepeat: s in node.detailData.Stikkordvalg --> </div> <!-- ngRepeat: t in node.detailData.Matrisevalg --> </div> </div> <!-- nav tab end --> <!-- debug --> <div class="panel-group" id="debug_971ee760232d0a348462f21f778d5592_parent"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" data-target="#tab_debug_971ee760232d0a348462f21f778d5592" style="cursor:pointer"> <h4 class="panel-title"> DEBUG </h4> </div> <div id="tab_debug_971ee760232d0a348462f21f778d5592" class="panel-collapse collapse"> <pre> { "hash": "971ee760232d0a348462f21f778d5592" } </pre> </div> </div> </div> <!-- debug end --> </div> </div> </div> </div>

.nav-tabs { border-bottom: 2px solid #DDD; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; } .nav-tabs > li > a { border: none; color: #666; } .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; } .nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); } .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); } .tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }