We now support hidden and expanding text in posts


(Jeff Atwood) #1

We are now bundling the discourse-details plugin with all Discourse installs, thanks to @zogstrip.

This means you can have hidden and expandable text in your posts for whatever use you want.

We leveraged the HTML 5.1 features <details> and <summary> which are natively supported in Chrome and Safari, and probably soon in other browsers – we wrote shims so it works in all browsers.

<details>: The Details disclosure element - HTML | MDN

[ details=the summary]blablabla[/details]

will generate

<details>
<summary>the summary</summary>
blablabla
</details>

Live demo:

click or tap here to expand and collapse

Church-key yr irony Carles. Letterpress master cleanse trust fund asymmetrical, farm-to-table Wes Anderson chambray pickled brunch messenger bag synth kale chips cornhole bespoke actually. Meggings quinoa kitsch locavore sustainable, yr selvage cray shabby chic Brooklyn Neutra letterpress semiotics lumbersexual. IPhone mumblecore Thundercats selfies Marfa Williamsburg, ugh farm-to-table. Chambray vinyl chillwave, twee you probably haven’t heard of them keytar forage cornhole post-ironic iPhone. Four loko single-origin coffee literally, fixie food truck 3 wolf moon listicle crucifix semiotics cardigan distillery polaroid. Artisan American Apparel VHS, biodiesel blog brunch Blue Bottle skateboard ugh.

Raw denim 8-bit cold-pressed cred. Pop-up cred hoodie swag blog Truffaut flexitarian Bushwick put a bird on it.

  • Tilde cray freegan semiotics, salvia PBR wayfarers Carles Kickstarter.
  • Intelligentsia 90’s cray hella, whatever lumbersexual Echo Park Pinterest McSweeney’s kogi Vice listicle.
  • Retro lomo pug, YOLO irony McSweeney’s farm-to-table bitters single-origin coffee next level taxidermy keytar Wes Anderson.

Put a bird on it

Brooklyn cred, 8-bit semiotics roof party trust fund beard. Pork belly 90’s tofu pug slow-carb.


(Dylan) #2

Looks good, like a much better version of the spoilers as it completely hides the content until clicked.


(Dean Taylor) #5

I click that thing all the time.


(Jens Maier) #6

Just to make sure:

This arrow isn’t clickable in Chrome 40.0.2214.115 m or Firefox 36.0, both on Win 8.1 64 bit:

Also in Firefox, a bunch of non-summary text is visible even when the block is collapsed:


(Kane York) #7

Now, my question is: Do we want to CSS this at all?

Actually, maybe it’d be better to see if anyone comes up with a good-looking style for it first.


(Gerhard Schlager) #8

On Chrome it shows a cursor used for text input, which is confusing.

Would it be possible to change it to a pointer, so that everyone knows they can click it?


(Jeff Atwood) #9

Possibly, @zogstrip is still tweaking it.


(TechnoBear) #10

Same here with Chromium 40.0.2214.111 Ubuntu 14.10 (64-bit) and Firefox 36, both on Ubuntu Gnome 14.10.


(cpradio) #11

So it seems to make the triangle clickable, you need to apply it to the summary tag instead of the details tag. That is where the click event lies and by doing that you can make the whole thing clickable.


(Régis Hanol) #12

Thanks all for reporting these issues. They should all be fixed :cat:

https://github.com/discourse/discourse-details/commit/af5b18a2f6209c249a1b4426d949c6cb3ed1c74f


(TechnoBear) #13

That’s fixed the issue in Chromium for me, but in Firefox, it just seem to move the image.

to


(Régis Hanol) #14

Thanks. Just pushed a fix :dog:


(TechnoBear) #15

Working perfectly now, thank you. :bear:


(Maestro Magnifico) #16

Animation would be nice. :smile: Like here.


(Régis Hanol) #17

This topic was automatically closed after 12 hours. New replies are no longer allowed.