JSFiddle - React, Tailwind, and code Playground

by Thahir

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>32</li>
    <li>33</li>
    <li>34</li>
    <li>35</li>
    <li>36</li>
    <li>37</li>
    <li>38</li>
</ul>

CSS

ul{
    width: 220px;
    height: 108px;
    padding: 0;
    overflow: hidden;
}
li{
  list-style-type: none;
  background-color: #ccc;
  height: 50px;
  width: 50px;
  display: inline-block;
  position: relative;
  border: 1px solid transparent;
  margin-bottom: 2px;
}
.bar{
  border: 1px solid #dd0017;
}

JavaScript

var collpoasedState = 'collpased',
    ul = $("ul"),
    el, removedEl,
    expand= function(){
    collpoasedState = 'expanded';
     ul.css({'overflow-y': 'scroll'}).animate({
           height: '+300'
       });
},
    collpase = function(el){
        collpoasedState = 'collpased';
           ul[0].scrollTop = 0; 
       ul.animate({
           height: '108'
       }, function(){
           removedEl = el.detach();
           ul.prepend(removedEl).css({'overflow-y': 'hidden'});
       });
    };

$( "li" ).click(function() {
    el = $(this);
  $("li.bar").removeClass( "bar" );
    el.addClass("bar");
    if(el.index() == 7){
        (collpoasedState == 'collpased') && expand();
    }else {
        (collpoasedState == 'expanded') && collpase(el);
    }
});