exandable comments with javascript

Overview

At the end of my last iteration, I had a blog that looked like this:

Note that the second post indicates that there is one comment (and the '1 comment' text is a clickable link). When I'm done with this iteration, the user will be able to click a 'show' link that will display the comments:

[ screen shot of comments displayed ]

Note that there is now a 'hide' link. If the user clicks this, then the comments are hidden.

First thing, I wrapped all the posts in a div with id="posts". I'm going to use this later (in my javascript) to determine if the page that's loading has any posts on it.

       <div id="posts">  
        <b:loop values='data:posts' var='post'>  
         <b:include data='post' name='post'/>  
        </b:loop>  
       </div>  

Next, I created a stub javascript function that will execute once the page has finished loading. I use this function to insert comments into posts (where they exist). I needed to go this route, because post.comments is only available if I'm on an item page - not if I'm on the home page (see the Blog Posts section of Layouts Data Tags on Blogger Help).

          window.onload = function () 
          { 
            var postDiv = document.getElementById("posts")
            if (postDiv)
            {
              
            }
          }

Add post.id into post wrapper:

<div class="post-wrapper" expr:data-post-id='data:post.id'>