Hiding Tumblr Comments/Notes with JQuery

by admin

It’s not that I don’t like comments and notes. But they can be very, very ugly. And they can turn a short post into a long one, and a long post into an unreadable monstrosity. 

So I decided to do some quick toggle work using JQuery, which this theme already uses to generate its tag cloud. 

First, I replaced the <body> tag with this bit of javascript:

<body onload="$('div.post-notes,#disqus_thread').hide();"> 

This hides comments and notes when the page loads. Chances are it will work for you out of the box; if not, check the theme CSS to see what identifiers it uses for the sections that display notes and comments and substitute them for .post-notes and #disqus_thread.

Second, I added this script to the theme body, just before the {block:PostNotes} section:

{block:PermalinkPage}

<script>
$(document).ready(function() {
      $('#togglenotes').click(function(){
      $('div.post-notes').toggle();
      });
});
</script> 

<input type="submit" class="btn" name="togglenotes" value="notes" id="togglenotes" />

{/block:PermalinkPage} 

This will place a button labelled “notes” above your hidden notes section; clicking it will make your posts appear if hidden, and disappear if visible.  A nearly identical script is used to toggle comments, with #disqus_thread (or whatever your comments section is called) replacing div.post-notes.

You can skin the buttons fairly easily using CSS, and as a final touch, I set the “notes” and “comments” text in the permalink to jump directly to the buttons using an anchor link, inserting <a name="bottom">&nbsp</a> just ahead of the <input> code.