When I visit someone’s profile on Twitter.com it’s generally because I want to see what they’ve written to me, the arbitrary reader. However, I often can’t see the wood for the trees; in a timeline with lots of replies or retweets it can be hard to weedle out the original tweets.

For example, here’s the current selection of above-the-fold tweets from the ever-readable Glenn Fleishman:

It’s all replies! That’s not to criticise Glenn. Quite the reverse; it’s great to see people having a two-way conversation on Twitter, it’s just that I’m not interested in this one – I don’t know the person he’s talking to and I only see half the conversation anyway.

I’d love it if Twitter had a toggle at the top of that page to turn display of replies and retweets on and off, but they don’t – so I wrote some myself. Below are two bookmarklets – drag them to your bookmark bar and they’ll toggle replies and/or retweets on and off accordingly, giving you something like this:

Much better!

Toggle replies bookmarklet

This bookmarklet toggles replies on and off when viewing someone’s timeline at twitter.com.

Toggle @s

Instructions: drag the link to your bookmarks bar, click to invoke.

Toggle retweets bookmarklet

This bookmarklet toggles retweets on and off when viewing someone’s timeline at twitter.com.

Toggle RTs

Instructions: drag the link to your bookmarks bar, click to invoke.

Source code

The bookmarklets aren’t perfect. You may need to re-invoke them on scrolling down the page as Twitter loads more tweets on demand. But they’re simple to install and use and suit the purpose I wanted them for.

Here’s an expanded version of the source for each bookmarklet, featuring self-documenting variable names, nice formatting and comments. Feel free to hack accordingly and improve the bookmarklets. Let me know if you’ve got improvements you’d like to share.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

/*
 *  === Routine for toggling @replies ===
 *
 *  Step 1: Using jQuery (which Twitter already loads), select the div 
 *  elements of class stream-item that contain tweets where the 
 *  data-is-reply-to attribute is true.
 */
var tweets = $('div.tweet[data-is-reply-to=true]').parents('div.stream-item');

/*
 *  Step 2: Determine whether we're hiding or showing. If there are no replies
 *  visible then we'll show replies, otherwise we'll hide them.
 * 
 *  FAQs :)
 * 
 *  Why not just call tweets.toggle()? 
 * 
 *  Because that gets all messed up if you scroll down and Twitter auto-loads
 *  some more tweets. At that point if you've got replies hidden then the
 *  bookmarklet will hide the visible tweets and show the hidden ones.
 *  (This way the bookmarklet also plays better with the one for hiding
 *  retweets where you have retweeted replies.)
 */
var shouldShow = tweets.filter(':visible').size() == 0;

/*
 *  Step 3: Toggle the replies on or off
 */
tweets.toggle(shouldShow);

/*
 *  === Routine for toggling retweets ===
 *
 *  Exactly the same logic as for replies, only in the first line we filter
 *  div.tweet elements based on whether they have a data-retweet-id attribute.
 */
var tweets = $('div.tweet[data-retweet-id]').parents('div.stream-item');
var shouldShow = tweets.filter(':visible').size() == 0;
tweets.toggle(shouldShow);