index.html

---
layout: default
---
<div class="col-sm-12">
    <div class="posts">
        {% for post in site.posts %}
        <div class="post-li">
            <div class="col-sm-8">
                <ul class="postlist-block">
                    <li><time class="timeago postlist-meta" datetime="{{ post.date }}">{{ post.date |  date: "%A %-d %B %Y" }}</time>
                    <a class="postlist-meta pull-right comments-meta" href="{{ post.url }}#disqus_thread">0 <i class="fa fa-comments-o fa-lg"></i></a></li>
                    <li><a class="postlist-title" href="{{ post.url }}">{{ post.title }}</a></li>
                </ul>
            </div>

            <div class="col-sm-4 hide-on-phone">
                <ul class="postlist-block pull-right postlist-meta">
                    <li><a href="{{ post.url }}#disqus_thread">0 <i class="fa fa-comments-o fa-lg"></i></a></li>
                    <li><i><a href="{{ post.url }}">Details...</a></i></li>
                    <li><strong><a class="postlist-detail-indicator">Expand +</a></strong></li>
                </ul>
            </div>

            <div class="col-sm-12 postlist-detail">
                {{post.excerpt}}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<script>
    $(".post-li .postlist-detail-indicator").click(function() {
        var preview = $(this);
        preview.text(preview.text()=='Expand +'?'Collapse -':'Expand +');

        $(this).closest(".post-li").find(".postlist-detail").toggle("slow", function() {});
    });
</script>