---
layout: page
title: Category
permalink: /category/
---

<div><style>button { margin-bottom: 10px; }</style>
  <button class="waves-effect waves-light btn" onClick="expandAll();"><i class="mdi mdi-chevron-double-down left"></i>Expand</button>
  <button class="waves-effect waves-light btn" onClick="collapseAll();"><i class="mdi mdi-chevron-double-up left"></i>Collapse</button>
</div>

{% capture categories %}
  {% for c in site.categories %}{{ c | first }}{% unless forloop.last %},{% endunless %}{% endfor %}
{% endcapture %}
{% assign category_names = categories | strip | split:',' | sort %}

<div class="post-category">
  {% for cate in category_names %}
    <a id="{{ cate }}" class="section scrollspy"></a>      <!-- TODO for position-->

    <ul class="collapsible" data-collapsible="expandable">
      <li>
        <div class="collapsible-header active">
          <span class="capitalize" style="font-size: 18px;">{{ cate }}</span>
          <a class="waves-circle btn-floating right waves-effect waves-green white"><span class="pink-text">{{ site.categories[cate].size }}</span></a>
        </div>

        <div class="collapsible-body">
          {% for post in site.categories[cate] %}{% if post.title != null %}
          <ul>
            <li>
              {{ post.date | date: "%Y-%m-%d" }}&nbsp;&nbsp;>>&nbsp;&nbsp;<a class="category-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
            </li>
          </ul>
          {% endif %}{% endfor %}
        </div>
      </li>
    </ul>
  {% endfor %}
</div>