"Collapsible nested comments"
Bootstrap 3.3.0 Snippet by erdemece

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="post-comments">
<form>
<div class="form-group">
<label for="comment">Your Comment</label>
<textarea name="comment" class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-default">Send</button>
</form>
<div class="comments-nav">
<ul class="nav nav-pills">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
there are 2593 comments <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Best</a></li>
<li><a href="#">Hot</a></li>
</ul>
</li>
</ul>
</div>
<div class="row">
<div class="media">
<!-- first comment -->
<div class="media-heading">
<button class="btn btn-default btn-xs" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseExample"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button> <span class="label label-info">12314</span> terminator 12 hours ago
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
.post-comments {
padding-bottom: 9px;
margin: 5px 0 5px;
}
.comments-nav {
border-bottom: 1px solid #eee;
margin-bottom: 5px;
}
.post-comments .comment-meta {
border-bottom: 1px solid #eee;
margin-bottom: 5px;
}
.post-comments .media {
border-left: 1px dotted #000;
border-bottom: 1px dotted #000;
margin-bottom: 5px;
padding-left: 10px;
}
.post-comments .media-heading {
font-size: 12px;
color: grey;
}
.post-comments .comment-meta a {
font-size: 12px;
color: grey;
font-weight: bolder;
margin-right: 5px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('[data-toggle="collapse"]').on('click', function() {
var $this = $(this),
$parent = typeof $this.data('parent')!== 'undefined' ? $($this.data('parent')) : undefined;
if($parent === undefined) { /* Just toggle my */
$this.find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
return true;
}
/* Open element will be close if parent !== undefined */
var currentIcon = $this.find('.glyphicon');
currentIcon.toggleClass('glyphicon-plus glyphicon-minus');
$parent.find('.glyphicon').not(currentIcon).removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

this is a test

sean () - 8 years ago - Reply 1


We used this with some modification: https://www.hearingtracker....

Hearing Tracker () - 9 years ago - Reply 0


How would you change the default state to closed, and then toggle open with click?

beth () - 9 years ago - Reply 0


<div class="panel-collapse collapse in" id="collapseOne">

change collapse to collapsed

erdemece () - 9 years ago - Reply 0


asdasd

asd () - 8 years ago - Reply -1


asda

asd () - 8 years ago - Reply 0


dddd

Darqul () - 7 years ago - Reply 0


asdad

asd () - 8 years ago - Reply 0


asda

asd () - 8 years ago - Reply 0


while expanding comments if the icon get change from (+) to (-) will be nice to look .

hello () - 9 years ago - Reply 0


done.

erdemece () - 9 years ago - Reply 0