The

  <detail>
      <summary>
          Title
      </summary>
      Content
  </detail>

tag allows you to do that iirc. I use it on my site and works fine to hide things that you can expand upon when clicked.

Another way is to use the checkbox-and-CSS trick. You add a hidden checkbox next to the element you want to hide, add a label to trigger the checkbox, and then use a + selector to toggle the visibility based on the state of the checkbox. Like this:

    <label for="spoiler">Toggle spoiler</label>
    <input type="checkbox" id="spoiler"/>
    <div id="spoilerContent">Spoilery stuff goes here</div>
    <style>
    #spoiler, #spoilerContent{display: none;}
    #spoiler:checked+#spoilerContent{display: block;}
    </style>

You can also use a variation of this for tabs - just use radio buttons instead - and accordions.

IIRC that will mess up screenreaders though. The detail tag is specifically made for this sort of thing and is therefore almost certainly more accessible.

And accessibility trolls are hot right now.

I hope my fellow HN readers never need an accessibility troll to advocate on their behalf.

Yes. But I believe details / summary is considered more accessible. Since its in the spec it's something AT has or is working towards.

It be more correct to say what grishka said above: "that will mess up screenreaders though"

But if it's more accessible depends on the target user. If you're target are IE users or users with very old browser versions, for one reason or another, more accessible would be to use the CSS toggle trick. But if indeed your target user are users using screenreaders and using recent browsers, then details and summary elements would be more accessible.

A bit anal, but important to consider when talking about accessibility, it's very context sensitive.

Accessibility is specifically about making things accessible to those with disabilities. Unless you are making a joke about the intelligence IE users or those using old browsers, accessibility isn't about maximizing potential reach.

Accessibility is often thought of as just making things accessible to people with disabilities, but it's not just that. Accessibility is mainly about maximizing the reach, not just for people with disabilities but people in any situation.

For example, people who live in South America usually have a lot worse internet connection, and more likely to be on mobile networks, than people in the west. If you're audience is mainly in South America, working on making your application accessible, means making sure your application has low bandwidth usage, can deal with high latency and jitter, and works well for phones.

One only has to look at the definition of the word "Accessibility" to see why you're wrong: "accessibility - the quality of being able to be reached or entered - the quality of being easy to obtain or use - the quality of being easily understood or appreciated".

Not sure where the focus on people with disabilities came from, it's important, but accessibility is much bigger than just that.

> Not sure where the focus on people with disabilities came from

You are right, accessibility _can_ take into account degraded environments, but if you don't know why disabilities are focused on, that suggests to me you are philosophizing on the word, and not addressing actual technical standards that have been put in place. Just google it

"Just Google it" doesn't scream curious conversation exactly.

Your argument was "Accessibility is specifically about making things accessible to those with disabilities" which by no definition of the word, is true. Look it up.

Not sure why I'd have to read the various specifications again when I've already done that. I'm still of the same impression (like most others) that accessibility is much bigger than just making things work for those with disabilities.

What's IE? ;)

Thanks!

It even works in GitHub Markdown: I use it to put long code snippets/examples into a fold.

Oh no way. Going to have to use this

Somehow it takes 4 seconds to un-collapse a toplevel comment in Chrome. E.g. this one: https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_th...

Pages also seem to take around 10 seconds to do the initial render. No server problem, just rendering.

So if you do use this, I guess don't overdo it. :) Or at least profile.

I use a 2015 MBP potato laptop. I guess my perf problems aren't really relevant. But it handles all modern sites just fine, so it was surprising.

Definitely spikes something to 100% on each load: https://i.imgur.com/1fqBDEX.png and the CPU graph is a nice timeline of me reloading teddit.

EDIT: Oof. I just did a profiling session to figure out what the heck it was doing:

https://imgur.com/ilvRkEb

Purple = rendering time. As you can see, it's 100% pegged at rendering whenever I uncollapse a thread.

So, devs, if you happen to read this, the process is:

1. go to https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_th...

2. Collapse the toplevel comment https://imgur.com/vjDhTk2

(which is very fast.)

3. Activate a profiling session: Command-option-I, click performance tab, command-E to start recording

4. Un-collapse the thread

5. Stop recording

Here's the profiling session in case it helps: https://battle.shawwn.com/misc/2020-12-04/Profile-20201204T1... No idea if it gives any insight into what's going on, but there y'go.

I'm not sure how they'd solve this. 98.2% of the time is spent in "Layout": https://i.imgur.com/tSexr0n.png

Is there even anything you can do to address that kind of perf problem? Yuck. I don't envy whoever digs into that one.

I tried profiling with "Enable advanced paint instrumentation (slow)" but it seemed to show exactly the same result:

https://i.imgur.com/V26oOTT.png

"Nodes That Need Layout 3841 of 3987 Layout root#document" seems relevant. So it sounds like the details card is somehow causing a full-page layout for almost every element on the page. Which should be fast, except that every element seems to cause another layout. Or ... something.

Not sure if there's any other details I could give, but let me know if anyone has ideas.

fwiw, it's instantaneous for me on a 2016 laptop running Firefox on Linux w/ Xorg and nVidia. No fans even spin up (and this is an HP, and we all know how much HP fans like to spin.)

https://imgur.com/a/BjRqAs2

On my 2013 macbook pro running Firefox 83 it spends about ~130ms in "layout" when expanding the comments (quick enough to be almost imperceptible).

https://imgur.com/a/nV14ybI

Seems to be a Chrome-only issue?

Instantaneous on FF, old samsung S7

Dev here. This is a known issue. https://codeberg.org/teddit/teddit/issues/24

So far I haven't come up with any solution. The nested .comment styles seemed not be the problem. Although something in the CSS triggers the slow rendering on Chromium based browsers – not sure yet what.

If any of you have an idea, leave a comment here or in Teddit, appreciated!

EDIT: Oh, forgot to say: Works fine in Firefox, no rendering issues.

Any reason not to use flex instead of float?

Habits. Haven't updated my CSS skills as much as I would've wanted along the years. I'm mostly writing CSS like it's year 2010.

Hmm. Not related to the issue you mention, but also on that page, when I click a "Load more comments" link, it takes me to https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_th... , a webpage that just says "Cannot GET /r/Bossfight/comments/k6vh5v/bearers_of_the_eternal_duel/genbcos/genr9x6".

On Linux instantaneous in Firefox (78.5.0), takes forever in Chrome (87.0.4280.66) while using 100% of one CPU core/thread (I killed the tab after ~1 minute).

chrome potato here. seems approx. 6 seconds for collapsing any that i've clicked.

Working around Chrome's bugs just disincentivizes Google from fixing them.

Is it `details` [1] instead of `detail`?

1. https://css-tricks.com/quick-reminder-that-details-summary-i...

Yes, that's how I do it on littr.me (a federated link aggregator).

[edit] An example: https://littr.me/moderation

Biggest problem with Reddit is the giant echo chamber. Feels a lot like twitter. Super aggressive replies if you’re against the grain.

It feels to me like Reddit is only good for hobby or niche interests you might have. The main subreddits and politics are what make Reddit the shittiest. But if you stay away from these it’s ok.

I agree, your experience on Reddit will depend heavily on the subreddits you read.

I'm somewhat active on niche programming topics, and people are usually helpful and respectful.

I like that on Reddit I can stay in my bubble and not worry about the world's every single problem when I just want to relax.

On Twitter, that's impossible. No matter how strictly you curate your feed, at least 1 in every 10 tweets will be something that ruins your mood (politics, drama, bullying).

However, I noticed the tone changed everywhere somewhat. I think I witness the pandemic's toll on people's capacity for empathy by the impulsive rudeness creeping into every niche subreddit I frequent.

Reddit became a shit show with Trump vs Clinton, but now people attack their own for every little sign of life.

We really need a better social network. Twitter, Reddit, HN, Facebook, ... They add little, but break a lot.

Best social network is in person. Get off the keyboard.

FWIW, I've also been noticing this in IRL/person situations:

> I think I witness the pandemic's toll on people's capacity for empathy

There's so many widely varying ways that effects of the pandemic can hit someone pretty bad (financially, mentally, of course physically, etc), and I think that part of the problem is that it's hard to see how real those problems are if you happened to not have suffered those particular hardships.

Personally I found this with isolation through lockdown. People who live with family, a partner or even just housemates seem to not quite understand what happens when the isolation creeps up on you (it creeps). Between the waves, when I could see people again, I could easily tell ones that did know, you could see it in their eyes if they talked about the lockdown period.

It is still quite common on Reddit for users to inject politics into absolutely everything, regardless of the subject. It really is difficult to get away from sometimes.

It's more about the people than the media though. All media can be invaded by politics because of people.

Yes, non major subs are ok, also it's shifting toward annoying too. 2020 is not helping.

My new social network is called the woods.

All those trees certainly cut down on the echo!

The rocks will amplify the echo though!

Hah as an introvert I can totally agree with this

You are exactly right about the hobby and niche interests. On the other hand, the larger subreddits that represent groups of people (such as a city, sports team, university, etc.) will have that echo chamber effect.

Same here as well. Just a different echo. Like, try to challenge the boys club here and get the elders' disaproval...

The problem is the voting. It's not inherently linked to the content's value to the discourse or even welfare of the collective. Wrong reward metric meets a brain evolved for social regulation in small groups of humans dependant on each other's survival. Like with all problems of modern humanity, we struggle with a novel abundance we created...

Tried this Teddit out, and was suitably impressed. Good job.

It's a shame I no longer visit Reddit, as most popular subs just fall into the echo chambers. I find IRC still pretty good for the technical conversations, and there are the odd old skool forums that are active.

Perhaps reddits success will be it's downfall?

It depends a lot on the subreddit. Different subreddits can have different echo chambers.

That's my experience. The subreddits I tend to frequent are pretty well behaved, and I generally have a good time.

But I've had friends who insist it's a massive shit show deserving of being blocked at the router (for at least one guy).

Same can be said with Twitter, or any social network. It's all about the company you choose to keep.

Most communities are. HN included.

They also hate DIY "here's my design if anyone wants to use it" posts. Sharing that you did something seems to induce reddit wrath.

Much like HN, unfortunately. And pretty much any online forum.

"... no javascript."

This is why I hang around on HN. Only place I know where I can find other people who agree that today's use of Javascript, 9 times out of 10, amounts to a nusiance.

The show/hide design pattern is annoying, IMO. Should be an accessibility violation; cannot tab through it.

I guess thats why I use a text-only browser. Avoids all the Javscript nonsense, not to mention the next CSS trick du jour.

The irony of complaining about one echo chamber and enjoying living in the 'no javascript' bubble is astounding. Can you use text-only websites for most use cases? Sure. Are people more likely to pay for your product if your website has client-sided interactivity and doesn't look awful? Absolutely.

I really don't get this complain and I've only seen it from developers. Certainly not company owners for pay for server/hosting costs (because they have seen how the insane costs of rendering everything server-side with large user bases). Even common people prefer it the way it is currently. The market has decided.

Are you sure it's not just that developers understand how the web works and know there's an alternative?

Most normies have no clue what JavaScript is

>The show/hide design pattern is annoying, IMO.

Hmmh, I don't know how to make it better. It's really challenging to do it without JS in the first place. Do you have any ideas?

So you're asking how to do it without a tool that was specifically designed for that purpose? I really don't get the hate for JS these days.

>So you're asking how to do it without a tool that was specifically designed for that purpose?

Yes, you are correct. This is a hobby project of mine, and one of the goal was to make old.reddit.com like UI without no JS at all. That's what I will do.

>I really don't get the hate for JS these days.

Unnecessary Javascript bloats websites, hogs system resources, enables surveillance, hinders accessibility that’s native to devices and clients, and introduces vulnerabilities. https://nojs.club/

Of course in this case using JS to hide/show comment tree wouldn't really be that bad, but works fairly well without it. Not many have complained.

The way I work around this, if I am stuck using a Javscript-enabled browser, is to just view the source of the page.

The information (content) is right there, in the page. I would say there is nothing to fix. It is just the Javascript getting in the way.

You can conditionally style elements based on an input checkbox's `checked` state. A label element can also toggle an input checkbox's `checked state`, but contain whatever HTML you want.

Put the two together and you can do interactive elements without JS:

``` <input id="inputId" type="checkbox" /> <label for="inputId"></label> <div class="toggle-content">Some DOM</div> ```

``` label::after{ display: block; content: '[+]'; } #input, .toggle-content { display: none; }

#input:checked + label::after { content: '[-]'; } #input:checked ~ .toggle-content { display: block; } ```

Off the top of my head, so YMMV but principal is all there.

You start getting headaches if you want animate that though (keyframes that animate a max-height from 0 to 9999999px goes some of the way but feels a bit hacky/doesn't give you much control over consistent timing.)

That's nice! But I've been using CSS for 2 decades, how did I not know this?!

It was not possible 2 decades ago; :checked selector was implemented in IE 9.

Hehe, I know CSS used to be a lot more basic than it is now, my point was simply that I've been working with CSS for a long time but had somehow missed this nugget.

>and no javascript.

Here is the source code: https://github.com/teddit-net/teddit. Maybe I am mistaken, but there seems to be a lot of JavaScript running this website.

The server is written in JavaScript, yes. But I don’t believe there is any client-side JavaScript

Yea, the server side is running on Node.js (with Pug template engine), but the client-side doesn't have any JS whatsoever.

Which also means that under heavy load, the server just crashes generating templates for that many users instead of just serving JS and rendering on the client-side. There's a reason we do things like this nowadays.

In my experience, this is not much of a problem. Server-side rendering is not that expensive, and can easily serve high volumes of users. After all, it has been used for decades, and is in continued use by most major sites. There's no significant performance difference between rendering HTML and rendering JSON.

Furthermore, there are easy ways to mitigate the cost of rendering on the server side. For example, on a site like reddit, most of the traffic is probably non-logged-in readers hitting the front page, so... cache the front page. Even for logged-in users, the front page listing only could be cached as rendered, since none of it really needs to be live. If liveness was desirable for only certain elements (e.g. voting buttons), it is possible to sprinkle on client-rendered elements.

but... then it would be the thing it's trying not to be.

I remember implementing the comment collapsing thing without JS, you have the "[-]" be a label for a checkbox button, and then you just use CSS to hide the sections for which the checkbox is checked.

I have for years been using the reddit compact interface, which to me is almost a pinnacle.

Append .compact to any reddit page and enjoy. It's fast and it's not the dimwitted slow loading mobile crap they've been throwing at us for years

They use tables too. The generated markup could be a lot better in the sense of semantics.

Your EDIT is a perfect explanation of reddit. No nutrition whatsoever!

it can be done pretty easily with an anchor tag and an href.