State tag sort

by William Cunningham

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row theButtons">
  <div class="col-sm-12 col-md-6">
    <div class="state-btn">
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Filter by State
      </button>
    </div>
  </div>
  <div class="col-sm-12 col-md-6">
    <div class="sort-btns pull-right">
      <div class="sort-btn-holder">
        <span class="sort-title sort-title-name"></span>
        <button id="asc" class="btn btn-primary" type="button">
          <img src="/media/abc/contentassests/images/departmentinformation/actuarial/sortaz.jpg" width="24px" height="24px">
        </button>
        <button id="desc" class="btn btn-primary" type="button">
          <img src="/media/abc/contentassests/images/departmentinformation/actuarial/sortza.jpg" width="24px" height="24px">
        </button>
      </div>
      <div class="sort-btn-holder">
        <span class="sort-title sort-title-date"></span>
        <button id="newer" class="btn btn-primary" type="button">
          <img src="/media/abc/contentassests/images/departmentinformation/actuarial/sort09.jpg" width="24px" height="24px">
        </button>
        <button id="older" class="btn btn-primary" type="button">
          <img src="/media/abc/contentassests/images/departmentinformation/actuarial/sort90.jpg" width="24px" height="24px">
        </button>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="collapse" id="collapseExample">
    <div class="well">
      <div id="tagsort-selector" class="tagsort-tags-container"></div>
    </div>
 ...

CSS

/*########################dev styles###########*/


/* body {
  border: 1px solid magenta;
}
.container {
 border: 1px solid green;
}
.row {
  border: 1px solid orange;
}

#subFooter {
      border: 1px solid #000;
} */


/*########################Style Guide###########*/


/* Dark Gray #323539
darker gray for borders etc
#222427
Tan #F0EBD8
Shelter Red: #CC0033;
Dark red:; #77001e;
Shelter Blue: #294780;
*/

.btn-primary {
  background-color: #294780;
  border-color: #1d3259;
  color: #F0EBD8;
}

.btn-primary:hover {
  color: #F0EBD8;
  background-color: #1d3259;
  border-color: #1d3259;
}

.btn-primary.focus,
.btn-primary:focus {
  color: #F0EBD8;
  background-color: #1d3259;
  border-color: #1d3259;
}

.btn-primary.active,
.btn-primary:active,
.open>.dropdown-toggle.btn-primary {
  color: #F0EBD8;
  background-color: #1d3259;
  border-color: #1d3259;
}

.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open>.dropdown-toggle.btn-primary.focus,
.open>.dropdown-toggle.btn-primary:focus,
.open>.dropdown-toggle.btn-primary:hover {
  color: #F0EBD8;
  background-color: #1d3259;
  border-color: #1d3259;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
  color: #F0EBD8;
  background-color: #294780;
}

.panel-default>.panel-heading {
  color: #F0EBD8;
  background-color: #294780;
  border-color: #ddd;
}

.red {
  /* red */
  background-color: #CC0033;
  width: 150px;
  height: 150px;
}

.blue {
  /* blue */
  background-color: #294780;
  width: 150px;
  height: 150px;
}


/*########################styles###########*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600);
* {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}

html {
  font-family: 'Open Sans', sans-serif !important;
}

body {
  font-family: 'Open Sans', sans-serif...

JavaScript

$(document).ready(function() {

}); //end document.ready