Collapsible Blog Posts(david-bieber.tumblr.com)
david-bieber.tumblr.com
Collapsible Blog Posts
http://david-bieber.tumblr.com/post/30907535147/collapsible-blog-posts
13 comments
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.
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.
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.
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.
A bit like an inline footnote?
Very much like one, just intended to be used more liberally with other related content as well.
[deleted]
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?
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.
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 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>
<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;
}<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>
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>
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.
Also easier than clicking each paragraph to see the point.
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
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
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.
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.
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.
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.
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.
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.
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
Firebug shows this error:
TypeError: e.srcElement is undefined
http://david-bieber.tumblr.com/post/30907535147/collapsible-...
Line 372
That's why you should never test in production. Fixed.
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!
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!
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!
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)
Whoa! As someone who compulsively clicks on text to select it while reading, I can't believe I've never realized this.
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.
Very cool effect! I did something similar, in reverse, on my personal site- http://andrewcantino.com
That looks really nice. And thanks for the link to http://www.telescopictext.com/ another neat implementation of a similar concept.
reminded me about awesome concept of TiddlyWiki.
What's wrong with just tl;dr?