Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Collapsing changes #11

merged 2 commits into from

3 participants


I've been loving HackerNew since I installed it, but one thing I missed was reddit-like comment collapsing from a plugin I was previously using called Hacker News Collapse.

This pull request implements HN Collapse in HackerNew. It's quite a bit less showy than the current implementation, but I think it does a good job of making comment collapsing fast and easily accessible.

Here's what it looks like before:
Before collapse

And after:
After collapse

Let me know what you think!


Hey Steven,

It's probably better to have the collapse functionality over on the left, it does better associate it with the content that you're collapsing. Does this patch do anything other than change the styling, or is it just a visual tweak?


+1 on having it on the left side. This is how the Reddit Enhancement suite does things:

Screen Shot 2013-03-13 at 1 16 57 PM

Which is super nice, because to collapse a whole bunch of comments in series you only have to move your mouse horizontally. From a design standpoint, that makes a lot more sense.


Ah interesting, I definitely feel this is a better direction than the current implementation - perhaps I could pull this and tweak it further so that the collapse is on the left.


.prepend instead?

Got it! I fixed it in 2efb623.


No need to hide/show on hover if it's just [-] imo. Not that much saved space.

What do you mean? This isn't doing anything on hover as far as I can see.

Ahh nevermind - I misread this.


There we are:




Looking good! How are you finding it functionally? I'll be able to check it out a bit later on... two things:

  • Are the retina arrows not working for you? They look kind of crappy...
  • I wonder if we can size the + and - to be the same size - perhaps use an emdash or something longer..
@tommoor tommoor merged commit 65364b1 into tommoor:master

Merging this as it's definitely an improvment. It looks like loss of retina was related to the HN update to https the other day and is a separate issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 12, 2013
  1. @stevenleeg
Commits on Mar 13, 2013
  1. @stevenleeg
This page is out of date. Refresh to see the latest.
Showing with 8 additions and 20 deletions.
  1. +0 −14 hn.css
  2. +8 −6 js/hn.js
14 hn.css
@@ -391,10 +391,7 @@ font u a:visited,
a.toggle-replies {
- float: right;
cursor: pointer;
- opacity: 0;
- -webkit-transition: all 0.2s ease-in-out;
a.toggle-replies:hover {
@@ -405,17 +402,6 @@ td.default:hover a.toggle-replies {
opacity: 1;
-a.toggle-replies.collapsed {
- opacity: 1;
- padding: 3px 6px;
- margin: -5px;
- background: #828282;
- color: white;
- border-radius: 3px;
/*********** Inline Replies ***********/
#quick-reply {
14 js/hn.js
@@ -260,9 +260,10 @@ var hn = {
if ($button.hasClass('collapsed')) {
var uniq = $'uniq');
- $('.hidden-reply-' + uniq).fadeIn().removeClass();
- $button.text('collapse')
+ $('.hidden-reply-' + uniq).show().removeClass();
+ $button.text('[-]')
+ $button.parent().parent().parent().children(".comment, p").show();
@@ -278,7 +279,7 @@ var hn = {
// find parent tr, several levels down
- $(this).parent().parent().parent().parent().parent().fadeOut().addClass('hidden-reply-' + uniq);
+ $(this).parent().parent().parent().parent().parent().hide().addClass('hidden-reply-' + uniq);
return true;
@@ -286,8 +287,9 @@ var hn = {
return false;
+ $button.parents("td.default").children("span.comment, p").hide();
- $button.text('show ' + count + ' replies')
+ $button.text("[+]")
.data('uniq', uniq);
@@ -468,7 +470,7 @@ var hn = {
var $wrapper = $(this).parent();
var $meta = $wrapper.find('span.comhead');
- $meta.append('<a class="toggle-replies">collapse<a>');
+ $meta.prepend('<a class="toggle-replies">[-]<a> ');
@@ -593,4 +595,4 @@ var hn = {
Something went wrong with that request. Please try again.