"history_dropbox"
Bootstrap 3.3.0 Snippet by devlopereswar

Post to Facebook Tweet this

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="container">
<div class="row">
<br/>
<br/>
<div class="center-box">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading share_note-panel_box">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1
<span class="pull-right">
Mar/2/2017
</span>
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="notes_body_header">
<div class="notes_header_username">
Lorem Impus User Name
</div>
<div class="notes_header_button">
<button class="btn-login btn-xs btn-primary">Click</button>
</div>
</div>
<div class="notes">
<div class="note_head">
<span>Symptom</span>
</div>
<div class="notes_content">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.center-box{width:70%; margin:auto; }
.share_note-panel_box.active{background:#fff !important; }
.share_note-panel_box {background:rgb(199, 238, 252) !important;box-shadow:0 0 3px #aaa;}
.share_note-panel_box .panel-title a{color:#666; font-weight:400;}
.share_note-panel_box .panel-title a:hover{text-decoration:none;}
.share_note-panel_box .panel-title a:focus{text-decoration:none;}
.notes{ width:100%;}
.note_head{flex-basis:100%; padding:5px; text-align:left;}
.note_head span{ color:#15B7E4; width:100%; float:left; padding:6px; border-radius:0; font-size:15px; text-decoration:underline; font-weight:600;}
.notes_content{flex-basis:100%;padding:0 12px; text-align:left;}
.notetext{width:100%; height:100%; border:none; text-align:left; padding:6px;}
.notetext:focus{outline:none; box-shadow:0 0 1px rgba(0,0,0,0.3);border:1px solid rgba(0,0,0,0.1);}
.notes_body_header{width:100%; float:left;border-bottom:1px solid rgba(0,0,0,0.2);}
.notes_header_username{width:70%;float:left;text-align:center;padding:10px;}
.notes_header_button{width:30%;float:left;padding:10px; text-align:right;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
$('.share_note-panel_box').click(function(){
$(this).toggleClass("active");
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit PRO Angular

Questions / Comments: