JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<ul class="archive_year">
  <li class="years">2012
      <ul class="collapsible_group">
          <li class="collapsible_list">September
              <ul class="archive_posts">
                  <li class="posts">Article 1</li>
                  <li class="posts">Article 2</li>
                  <li class="posts">Article 3</li>
                  <li class="posts">Article 4</li>
              </ul>
          </li>
          <li class="collapsible_list">August
              <ul class="archive_posts">
                  <li class="posts">Article 1</li>
              </ul>
          </li>
      </ul>
  </li>
  <li class="years">2011</li>
      <ul class="collapsible_group">
          <li class="collapsible_list">July
              <ul class="archive_posts">
                  <li class="posts">Article 1</li>
              </ul>
          </li>
      </ul>
  </li>
  <li class="years">2009</li>
      <ul class="collapsible_group">
          <li class="collapsible_list">January
              <ul class="archive_posts">
                  <li class="posts">Article 1</li>
              </ul>
          </li>
      </ul>
</ul>

CSS

#years, #months, #posts{
    cursor:pointer;
}
.archive_year {
margin-left: 1em;
font-size: large;
font-weight: bold;
cursor: pointer;
}
.collapsible_group {
margin-left: 1em;
margin-top: 0;
margin-bottom: 1em;
list-style-type: circle;
font-size: medium;
cursor: pointer;
}
.archive_posts {
margin-left: 1em;
margin-top: 0;
margin-bottom: 1em;
list-style: square url('http://www.webbossuk.com/admin/images/reply-arrow.png');
font-weight: normal;
cursor: pointer;
}

JavaScript

$('.collapsible_list ul').hide();
$('.collapsible_list').click(function() {
    $(this).find('ul').slideToggle(50);
});