Bootstrap Snippet open and close panels in bootstrap and jquery using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"open and close panels in bootstrap and jquery"
Bootstrap 3.3.0 Snippet by hakonamatata

Related: See More

Questions / Comments:

"open and close panels in bootstrap and jquery" Bootstrap 3.3.0 Snippet by hakonamatata

Related: See More

Questions / Comments:

"open and close panels in bootstrap and jquery"
Bootstrap 3.3.0 Snippet by hakonamatata