Collapsible Blog Posts

http://david-bieber.tumblr.com/post/30907535147/collapsible-blog-posts

by dbieber • 14 years ago

41 26 14 years ago

david-bieber.tumblr.com

smacktoward• 14 years ago

Ummm... it works in Chrome, but not in Firefox.

Firebug shows this error:

TypeError: e.srcElement is undefined

http://david-bieber.tumblr.com/post/30907535147/collapsible-...

Line 372

dbieber6• 14 years ago

That's why you should never test in production. Fixed.

shortformblog• 14 years ago

Interesting effect. I've done things similar to that in the past on my Tumblr. http://sfbne.ws/PH8kO8

It does have some downsides, and alas, the biggest ones show up in the reblogs of the content on Tumblr — you reblog that post and you see everything. My suggestion would be to see if you could do the collapsible effect with a p title tag, rather than setting two paragraph with two CSS classes, and embedding the Javascript into the post. That way, the effect follows people on Tumblr reblogs.

I'm a bit of a nut for visual effects like this, though. I might try it at some point. Good work.

dbieber6• 14 years ago

Neat. I like what you did with the mouseovers. There's definitely a lot you can do with simple scripts like this, especially if you craft each post individually.

I was going for something that could be quickly reused without much thought. I'll have to see if my script lives up to that as I continue blogging.

volaski2• 14 years ago

I really don't get the point. Why not just have two divs inside one paragraph, where the display property alternates whenever you click on it? Also why use an id when what you're actually doing is alternating certain classes of divs? Am I missing something?

dbieber6• 14 years ago

One thing I was going for is being able to type the post quickly without having to think much about HTML. <p id="x"> and <p id="_x"> is really the shortest I could get it. Maybe you could spell out your two div idea in a bit more detail for me- I don't know exactly what you have in mind.

sarchertech• 14 years ago

I'm pretty sure he's thinking of something like this:

    <p>
      <div class="active">Short Form</div>
      <div class="inactive">Long Form</div>
    </p>

,where clicking switches the classes.

volaski2• 14 years ago

There are many ways, but you could also do something like this:

  p.expanded > div.big{
    display:block;
  }
  p.expanded > div.small{
    display:none;
  }

</style>

<p class = 'expanded'> <div class = "big">click to collapse this</div> <div class = "small">click to expand this</div> </p> <p class = 'collapsed'> <div class = "big">click to collapse me</div> <div class = "small">click to expand me</div> </p>

ysph• 14 years ago

The idea itself is right. Kudos for that. I could see it in combination with something like redraftable as a powerful mechanism for expression and collaboration.

evmar• 14 years ago

I think the time spent on writing a summary for each paragraph could be better spent editing the paragraph to its essence, such that a summary isn't necessary.

dbieber6• 14 years ago

I agree, and I think I was suggesting the wrong use case at first.

In a typical blog post, the summaries shouldn't be necessary. A good use case for Collapsible Blogging is when you are listing multiple items or events, and the reader may only be interested in reading about one or two. Then the reader can choose to expand just those. May be better as Expandable Blogging rather than Collapsible Blogging.

I'm going to try it out this way and see what people think.

firefoxman12• 14 years ago

That's very true. I had a very similar idea a while ago, but it worked the other way around: semi-relevant tangents and sidenotes would be collapsed by default, and you click to expand them.

njs12345• 14 years ago

A bit like an inline footnote?

tectonic• 14 years ago

Very cool effect! I did something similar, in reverse, on my personal site- http://andrewcantino.com

dbieber6• 14 years ago

That looks really nice. And thanks for the link to http://www.telescopictext.com/ another neat implementation of a similar concept.

noirman• 14 years ago

What's wrong with just tl;dr?

niklaslogren• 14 years ago

This doesn't really work for me: whenever I read articles on the internet, I tend to select text by double-clicking and dragging, which trigger the collapsation. Neat concept, though!

dbieber6• 14 years ago

There's probably a way for me to not collapse on a double-click-and-drag. But you should consider switching over to single-click-and-drag! Saves loads of clicks over the course of a year!

lmm• 14 years ago

Double-click and drag makes the selection be whole words, which saves time over having to find the start and end more precisely. (I actually often triple-click and drag, for selecting whole paragraphs)

gw666• 14 years ago

As a former magazine editor of 20+ years, I think the idea shows great promise. I agree with your statement in the comments that it might be better used as Expandable Blogging. But try stuff out--see what the market likes!

Andrenid• 14 years ago

I'm not sure where I saw it, but I once saw a blog post that just had the main line of each paragraph bolded, and at the top said "For the TL;DR read the bold bits"... as much as random bolded sentences through an article can be kind of annoying, in some circumstances it works quite well.

Also easier than clicking each paragraph to see the point.

carlesfe• 14 years ago

It is a very good idea. However, I feel that there is something off. Maybe the excess clicking. Maybe that it's not clear whether a paragraph is expanded or collapsed.

Don't want to discourage you, quite the opposite. Give it some more thought and try to refine these points, I'd really like to see a new iteration

APuschilov• 14 years ago

Puh...I'm not sure if I like that. Yes for skimming a text it might be useful, but then why not just write a very good description/summary at the top or bullet-point conclusion at the bottom.

Also the first sentence of a paragraph should provide a summary of the following paragraph if following good writing guidelines (kinda http://www.une.edu.au/tlc/aso/students/factsheets/paragraph....)

On the other hand, collapsible blog posts could help the writer. For instance after writing a blog post I would love if in iAWriter or WriteMonkey I could collapse all the paragraphs to just their respective first sentence. If the collapsed text would still bring my argument across I did a good job, if not I'd have to rework it.

ArekDymalski• 14 years ago

reminded me about awesome concept of TiddlyWiki.

Collapsible Blog Posts

Related Stories