

Collapsible Blog Posts - dbieber
http://david-bieber.tumblr.com/post/30907535147/collapsible-blog-posts

======
evmar
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.

~~~
firefoxman1
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
A bit like an inline footnote?

~~~
firefoxman1
Very much like one, just intended to be used more liberally with other related
content as well.

------
volaski
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?

~~~
dbieber
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.

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

<script> $(document).on("click", "p", function(event){
if($(this).hasClass("expanded"){
$(this).removeClass("expanded").addClass("collapsed"); } else{
$(this).removeClass("collapsed").addClass("expanded"); } }); </script>

<style> p.collapsed > div.big{ display:none; } p.collapsed > div.small{
display:block; }

    
    
      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>

------
Andrenid
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
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
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....](http://www.une.edu.au/tlc/aso/students/factsheets/paragraph.pdf))

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.

------
smacktoward
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-...](http://david-
bieber.tumblr.com/post/30907535147/collapsible-blog-posts)

Line 372_

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

------
shortformblog
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.

~~~
dbieber
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.

------
gw666
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!

------
niklaslogren
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!

~~~
dbieber
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
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)

~~~
kibwen
Whoa! As someone who compulsively clicks on text to select it while reading, I
can't believe I've never realized this.

------
ysph
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.

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

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

------
noirman
What's wrong with just tl;dr?

------
ArekDymalski
reminded me about awesome concept of TiddlyWiki.

