JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="tab-content">
  <div class="tab-pane active" id="developer">
    <div class="horizontal-timeline" data-url="/company_games?id=28"></div>
    <div class="timeline">
      <div class="sorting-area">
        <span class="fa fa-filter text-muted"></span>
        <span class="text-muted">Sorting</span>
        <div class="sorting-methods"><a class="label label-primary" data-sort="rating">Rating <span class="fa fa-caret-down"></span></a><a class="label label-default" data-sort="releasedate">Release date <span></span></a><a class="label label-default" data-sort="title">Title <span></span></a>
        </div>
      </div>
      <div class="media" data-releasedate="1997-11-30">
        <a class="pull-left" href="/games/an-elder-scrolls-legend-battlespire">
          
        </a>
        <div class="media-body">
          <h4 class="media-heading">
            <a href="/games/an-elder-scrolls-legend-battlespire">
              <span>An Elder Scrolls Legend: Battlespire</span>
            </a>
            <small class="text-muted">(1997)</small>
          </h4>
          <p></p>
        </div>
      </div>
      <div class="media" data-releasedate="1994-04-01">
        <a class="pull-left" href="/games/the-elder-scrolls-arena">
          
        </a>
        <div class="media-body">
          <h4 class="media-heading">
            <a href="/games/the-elder-scrolls-arena">
              <span>The Elder Scrolls: Arena</span>
            </a>
            <small class="text-muted">(1994)</small>
          </h4>
          <p></p>
        </div>
      </div>
      <div class="media" data-releasedate="2002-11-06">
        <a class="pull-left" href="/games/the-elder-scrolls-iii-tribunal">
          
        </a>
        <div class="media-body">
          <h4...

CoffeeScript

sorters = {}

$('[data-sort]').click ->
    sorter = $(@)
    parent = sorter.closest('.timeline')
    sortType = sorter.data('sort')
    
    reverse = sorters[sortType]
    sorters[sortType] = (if reverse? then !reverse else true)
    caretClass = "fa-caret-down"
    caretClass = "fa-caret-up" if reverse
    
    items = parent.find('.media').sort (a, b) ->
        a = $(a)
        b = $(b)
        if sortType is "title"
            a.find('h4 span').html() > b.find('h4 span').html()
        else
            a.data(sortType) > b.data(sortType)
            
    items = $(items.get().reverse()) if reverse
    parent.find('.label').removeClass('label-primary').addClass('label-default')
    .find('span').removeAttr('class')
    sorter.toggleClass('label-default label-primary')
    .find('span').addClass("fa #{caretClass}")
    items.appendTo parent