JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<ul>
  <li>
    <div class="li-behind"><p>I am behind shit</p></div>
    <div class="li-content"><p>Click Me</p></div>
  </li>
  <li>
    <div class="li-behind"><p>I am behind shit</p></div>
    <div class="li-content"><p>Click Me</p></div>
  </li>
  <li>
    <div class="li-behind"><p>I am behind shit</p></div>
    <div class="li-content"><p>Click Me</p></div>
  </li>
  <li>
    <div class="li-behind"><p>I am behind shit</p></div>
    <div class="li-content"><p>Click Me</p></div>
  </li>
  <li>
    <div class="li-behind"><p>I am behind shit</p></div>
    <div class="li-content"><p>Click Me</p></div>
  </li>
  <li>
    <div class="li-behind"><p>I am behind shit</p></div>
    <div class="li-content"><p>Click Me</p></div>
  </li>
</ul>

CSS

body{
  background:#eee;
  font-family:Arial;
}
ul{
  list-style-type:none;
  padding:0;
  width:300px;
  margin:10px;
  border:1px solid #ccc;
}
/*
 * Relative is important. This lets us set all
 * childrens position to absolute, which will be
 * relative to their parent as it is set to relative.
 */
ul li{
  position:relative;
  height:40px;
  min-width:250px;
}

/*
 * Style our forefront and behind panels.
 * Both divs are set to absolute position
 */
ul li .li-behind{
  position:absolute;
  color:#fff;
  background:#333;
  -webkit-box-shadow:0 0 10px #000 inset;
  -moz-box-shadow:0 0 10px #000 inset;
  box-shadow:0 0 10px #000 inset;
}

ul li .li-content{
  position:absolute;
  border-bottom:1px solid #ccc;
  background:#fff;
  white-space:nowrap;
  overflow:hidden;
}
ul li:last-child .li-content{
  border:none;
}

/*
 * Here is where we set the divs 
 * positions within the li elements
 */
ul li .li-behind,
ul li .li-content{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/*
 * Our top div will slide out 50% later on, 
 * so lets set our behind div to 50% width
 */
ul li .li-behind{
  right:50%;
}

/*
 * Some padding to p tag
 */
ul li p{
  padding:10px 15px;
}


/*
 * Gout our positioning and shit, lets animate.
 * Transition all divs plus the p tags
 */

li .li-content, li .li-behind, li p{
  -webkit-transition: all 0.3s ease; 
  -moz-transition: all 0.3s ease; 
  -o-transition: all 0.3s ease; 
  transition: all 0.3s ease;
}

/*
 * nice little scale for effects
 */
li .li-behind p{  
  -webkit-transform: scale(0.9); 
  -moz-transform: scale(0.9); 
  -ms-transform: scale(0.9); 
  -o-transform: scale(0.9); 
  transform: scale(0.9);
}

/*
 * Open Styles. And li tags with class open
 * will have their respective children with
 * the following styles
 */

li.open .li-content{
  left:50%;
}

li.open .li-behind p{  
  -webkit-transform: scale(1); 
  -moz-transform: scale(1); 
  -ms-transform: scale(1); 
  -o-transform: scale(1); 
  transform: scale(1);
}

JavaScript

$(document).on('click', 'li', function(e){
  
  // cache
  _this = $(this);
  
  // Close an active slider
  if(_this.hasClass('open')){
    _this.removeClass('open');
  } else {
    // Open a different slider
    _this.parent().find('.open').removeClass('open');
    _this.addClass('open');
  }
  
});