JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<body onload="onLoad()">

<ul class="nav nav-pills nav-stacked item">
          <li class="active">
            <a href="#">small coffee: 1.33</a>
            <div class="item-info">
              yoyo
            </div>
          </li>
          <li>
            <a href="#">medium coffee: 1.52</a>
            <div class="item-info">
              yoyo2
            </div>
          </li>
          <li>
            <a href="#">large coffee: 1.71</a>
            <div class="item-info">
              yoyo3
            </div>
          </li>
          <li>
            <a href="#">medium coffee: 1.52</a>
            <div class="item-info">
              yoyo2
            </div>
          </li>
          <li>
            <a href="#">large coffee: 1.71</a>
            <div class="item-info">
              yoyo3
            </div>
          </li>
          <li>
            <a href="#">medium coffee: 1.52</a>
            <div class="item-info">
              yoyo2
            </div>
          </li>
          <li>
            <a href="#">large coffee: 1.71</a>
            <div class="item-info">
              yoyo3
            </div>
          </li>
          <li>
            <a href="#">medium coffee: 1.52</a>
            <div class="item-info">
              yoyo2
            </div>
          </li>
          <li>
            <a href="#">large coffee: 1.71</a>
            <div class="item-info">
              yoyo3
            </div>
          </li>
</ul>

    </body>

CSS

@-webkit-keyframes expand {
    0% {
        display: none;
        opacity: 0;
        height: 1px;
    }
    100% {
        display: block;
        opacity: 1;
        height: 100px;
    }
}

@-webkit-keyframes minimize {
    0% {
        display: block;
        opacity: 1;
        height: 100px;
    }
    100% {
        display: none;
        opacity: 0;
        height: 0px;
    }
}


div.item-info {
    -webkit-animation-name: minimize;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-box-sizing: box;
    border: 1px solid #999;
    padding: 10px;
    height: 0px;
    opacity: 0;
    background: #EEE;
    
    position: relative;
    top: -3px;
}

li.active .item-info {
    -webkit-animation-name: expand;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    height: 100px;
    opacity: 1;
}

JavaScript

function onLoad() {
    $("ul.nav.nav-pills.nav-stacked.item li a").click(function() {
        $("ul.nav.nav-pills.nav-stacked.item .active").removeClass("active");
        $(this).parent("li").addClass("active");
    });
}