JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Smilie">
	<div  class="Smilie-title">Smilie List<br>Click to expand and click again a smilie to insert it into your message.</br></div>
	<div class="Smilie-section">
		<div class="Smilie-name">Default</div>
		<div class="default-desc">
		  <p><img src="http://images.anime-sharing.info/images/smilies/smile.gif"/>
              <span class="label">:)</span></p>            
          <p><img src="http://images.anime-sharing.info/images/smilies/frown.gif"/>
              <span class="label">:(</span></p>
          <p><img src="http://images.anime-sharing.info/images/smilies/tongue.gif"/>
              <span class="label">:P</span></p>  
          <p><img src="http://images.anime-sharing.info/images/smilies/wink.gif"/>
              <span class="label">;)</span></p>            
          <p><img src="http://images.anime-sharing.info/images/smilies/biggrin.gif"/>
              <span class="label">:D</span></p>
          <p><img src="http://images.anime-sharing.info/images/smilies/redface.gif"/>
              <span class="label">:redface:</span></p>  
          <p><img src="http://images.anime-sharing.info/images/smilies/mad.gif"/>
              <span class="label">:@</span></p>            
          <p><img src="http://images.anime-sharing.info/images/smilies/eek.gif"/>
              <span class="label">:eek:</span></p>
          <p><img src="http://images.anime-sharing.info/images/smilies/rolleyes.gif"/>
              <span class="label">:rolleyes:</span></p>  
          <p><img src="http://images.anime-sharing.info/images/smilies/cool.gif"/>
              <span class="label">:8</span></p>            
          <p><img src="http://images.anime-sharing.info/images/smilies/confused.gif"/>
              <span class="label">:confused:</span></p>
          <p><img src="http://images.anime-sharing.info/images/smilies/ninja.gif"/>
              <span class="label">:ninja:</span></p>  
          <p><img...

CSS

.Smilie { margin:10px 0; background-color: #E6E6E6; width: 500px; }
.Smilie-title{ font-family: Verdana, Tahoma, Arial, Serif; background-color: #1162c5; color: white;
padding:4px; border: solid 1px #2e3d7a; border-top-left-radius:3px; border-top-right-radius: 6px; font-size: 10pt;}
.Smilie-name { font-family: Myriad Web Pro; font-size: 10pt; line-height:20px; padding: 0 10px;}
.Smilie-name:hover { background-color: silver !important; cursor: pointer;}
.Smilie-section { display:inline-block; padding-left: 10px;}
.default-desc { font-family: Myriad Web Pro; font-size: 9pt; height: 0px; padding: 1px; overflow:hidden; background-color:#def; display: block; border: solid 1px silver;}
.default-desc p {text-align: center; vertical-align: top; display: inline-block;margin-left: 10px; }
.default-desc img {   margin: 5px 5px 5px 5px; float:top; height: 20px; }
.label {display: block;}
.sticker p {text-align: center; vertical-align: top; display: inline-block;margin-left: 10px; }
.sticker img {   margin: 5px 5px 5px 5px; float:top; height: 60px; }
.sticker { font-family: Myriad Web Pro; font-size: 8pt; height: 0px; padding: 1px; overflow:hidden; background-color:#def; display: block; border: solid 1px silver;}

JavaScript

$('.Smilie-name').hover(function() {
    $(this).toggleClass('hover');
});

var lastItem;

$('.Smilie-name').click(function(currentItem) {
    var currentItem = $(this);
    if ($(this).next().height() == 0) {
        $(lastItem).css({'font-weight':'normal'});
        $(lastItem).next().animate({height: '0px'},400,'swing');
        $(this).css({'font-weight':'bold'});
        $(this).next().animate({height: '150px',opacity: 1},50,'swing');
    } else {
        $(this).css({'font-weight':'normal'});
        $(this).next().animate({height: '0px',opacity: 1},400,'swing');
    }
    lastItem = $(this);
});