JSFiddle - React, Tailwind, and code Playground

by cshop

HTML

<ul id="bpung">
      <li>
        
        <strong>Title</strong><br/>
        안녕하시렵니까?
      </li>
      <li>
        
        <strong>Title</strong><br/>
        좋은아침입니다.
      </li>
      <li>
        
        <strong>Title</strong><br/>
        저의 병풍습작입니다.
      </li>
      <li>
        
    </li>
  </ul>

CSS

#bpung {
list-style: none;
margin: 30px 0;
padding: 0;
height: 200px;
overflow: hidden;
background: #CCC;}
 
#bpung li {
float: left;
border-left:
display: block;
height: 170px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}
 
#bpung li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;
}
 
#accordion li.active {
width: 450px;
}

JavaScript

$(document).ready(function(){
 
    activeItem = $("#bpung li:first");
    $(activeItem).addClass('active');
 
    $("#bpung li").hover(function(){
        $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
        $(this).animate({width: "450px"}, {duration:300, queue:false});
        activeItem = this;
    });
 
});