Web Designer Wall

Snippets Collapsible

Bootstrap 5 Collapsible Comment Section

A discussion post header with a collapsible comment list and an add-comment bar. Toggling the comment count expands the thread and new comments are appended instantly.

Bootstrap 5 No jQuery May 2020 2.6K views 

<section class="wdw-stage">
  <div class="container" style="max-width:860px">
    <article class="wdw-card overflow-hidden">
      <header class="d-flex gap-3 p-4">
        <span class="avatar avatar-lg" aria-hidden="true">JH</span>
        <div class="flex-grow-1">
          <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
            <h1 class="h5 wdw-heading mb-0">Is Sketch 3.9.1 stable?</h1>
            <span class="badge rounded-pill bg-primary-subtle text-primary-emphasis">Video</span>
          </div>
          <div class="small wdw-muted d-flex flex-wrap align-items-center column-gap-2">
            <span>by <strong class="text-body">Jesshead</strong></span>
            <span class="sep" aria-hidden="true">·</span>
            <span>6 hours ago</span>
          </div>
        </div>
      </header>
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 px-4 py-2 border-top">
        <button class="btn btn-link btn-sm p-0 fw-semibold text-decoration-none comment-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#commentList" aria-expanded="true" aria-controls="commentList">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a8 8 0 0 1-11.6 7.1L3 20l1-4.6A8 8 0 1 1 21 12z"/></svg>
          <span id="commentCount" aria-live="polite">3 comments</span>
          <svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div>
          <label for="commentSort" class="visually-hidden">Sort comments</label>
          <select id="commentSort" class="form-select form-select-sm rounded-pill sort-select">
            <option value="new">Newest</option>
            <option value="old">Oldest</option>
          </select>
        </div>
      </div>
      <div class="collapse show" id="commentList">
        <ul class="list-group list-group-flush px-4 mb-0" id="commentItems" aria-label="Comments">
          <li class="comment-item d-flex gap-3 py-3" data-ts="2026-10-28T09:00">
            <span class="avatar" aria-hidden="true">MO</span>
            <div class="flex-grow-1 min-w-0">
              <div class="bubble"><div class="small mb-1"><strong>Maya Ortiz</strong> <span class="wdw-muted ms-1">5 hours ago</span></div><p class="mb-0">Stable for me since Monday. Symbols finally stopped resetting overrides.</p></div>
              <div class="d-flex gap-1 mt-1 ms-2">
                <button type="button" class="btn btn-sm rounded-pill act-btn like-btn" aria-pressed="false" aria-label="Like comment by Maya Ortiz"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"/></svg><span class="like-n">12</span></button>
                <button type="button" class="btn btn-sm rounded-pill act-btn reply-btn" aria-label="Reply to Maya Ortiz"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg>Reply</button>
              </div>
            </div>
          </li>
          <li class="comment-item d-flex gap-3 py-3" data-ts="2026-10-28T10:00">
            <span class="avatar" aria-hidden="true">TR</span>
            <div class="flex-grow-1 min-w-0">
              <div class="bubble"><div class="small mb-1"><strong>Tom Reyes</strong> <span class="wdw-muted ms-1">4 hours ago</span></div><p class="mb-0">Export slices are still slow on big files, otherwise no complaints.</p></div>
              <div class="d-flex gap-1 mt-1 ms-2">
                <button type="button" class="btn btn-sm rounded-pill act-btn like-btn" aria-pressed="false" aria-label="Like comment by Tom Reyes"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"/></svg><span class="like-n">4</span></button>
                <button type="button" class="btn btn-sm rounded-pill act-btn reply-btn" aria-label="Reply to Tom Reyes"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg>Reply</button>
              </div>
            </div>
          </li>
          <li class="comment-item d-flex gap-3 py-3" data-ts="2026-10-28T12:00">
            <span class="avatar" aria-hidden="true">PN</span>
            <div class="flex-grow-1 min-w-0">
              <div class="bubble"><div class="small mb-1"><strong>Priya N.</strong> <span class="wdw-muted ms-1">2 hours ago</span></div><p class="mb-0">Would love a short changelog video, thanks for sharing this one.</p></div>
              <div class="d-flex gap-1 mt-1 ms-2">
                <button type="button" class="btn btn-sm rounded-pill act-btn like-btn" aria-pressed="false" aria-label="Like comment by Priya N."><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"/></svg><span class="like-n">7</span></button>
                <button type="button" class="btn btn-sm rounded-pill act-btn reply-btn" aria-label="Reply to Priya N."><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg>Reply</button>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <form class="p-4 border-top bg-body-tertiary" id="commentForm">
        <div class="d-flex align-items-center gap-3">
          <span class="avatar d-none d-sm-inline-flex" aria-hidden="true">You</span>
          <div class="input-group flex-grow-1 composer">
            <label for="commentInput" class="visually-hidden">Add a comment</label>
            <input id="commentInput" class="form-control" type="text" placeholder="Add a comment" autocomplete="off" required>
            <button type="submit" class="btn btn-primary" aria-label="Post comment">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></svg>
              <span class="d-none d-sm-inline">Comment</span>
            </button>
          </div>
        </div>
      </form>
    </article>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More collapsible snippets