Skip to content

Changelog: Collapse Comments (via the `details` HTML tag)

ben profile image Ben Halpern twitter logo github logo ・1 min read  

You can now collapse comments by clicking on the ▼ symbol that appears near comments.

It is not 100% rolled out, as we'll let some caches clear naturally to display the new functionality. We may also need to make some small adjustments to click area radius and the such.

This feature was built using the nifty <details> tag, so the mechanism is not triggered by JavaScript.

Thanks to @link2twenty for pitching this approach in this issue:

Feature: Collapse comments #173

rishipuri avatar
rishipuri commented on Mar 06, 2018

Collapse comments

User Story

As a user I should be able to collapse comments.

Happy coding ❤️

twitter logo DISCUSS (22)
markdown guide

Might need to be a little different for mobile


I agree. It seems really out of place on mobile, or at least on my device.


Can you make an issue and/or PR describing this?


[UI] Collapsible comments on Mobile #1498

On mobile the collapsible comments arrow and summary are a little small.


Reddit, who also do collapsible comments, get around this by not having colapsible comments but rather only displaying base level comments with a button to reveal replies.


Once replies are revealed they can not be hidden away again.

This issue serves as a place to discuss the UI for mobile and any changes that may need to be made.


Love this new feature!

Just a problem: I can't interact with the comment's text anymore. I can't select it, copy the text and so on.

All the links work fine, it's just the actual body.


Oh, thanks for the catch.

Fixing that, and some of the other adjustments mentioned, here

The problem was that the surrounding div had user-select: none; applied to deal with not selecting all with rapid clicks of the toggle.

But it was applied in a cascading manner to the body by accident. Should be fixed shortly.


I really like how this is implemented! Name and number of replies while collapsed is just the right information needed, simplicity at it's best!
Loving it!


I have a really hard time clicking on the tiny arrow on mobile Safari. But once I do the whole line is clickable, which is nice...


Actually (hey, where did edit go?) first-level comments you can click on the entire line, but nested comments are harder to hit.


Actually, it works OK in Mobile Safari, but not in the Echofon twitter client...


Nice! You can do what you want with the details tag. If you need it here some example:


The arrow being above (not to the left) the first comment in a thread isn't a bug?


I think this has to do with the first comment spanning the full width of the column. So the width of all of the comments would need to be reduced a bit.

Classic DEV Post from Feb 20 '19

Breaking Down JavaScript Solutions To Common Algorithmic Questions (Part 1)

Walk through solutions to common algorithms in JavaScript from the brute force method to the final, optimized solution.

Ben Halpern profile image
A Canadian software developer who thinks he’s funny. He/Him.