JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<!-- Slide From Bottom -->
<div id="slidebottom" class="slide">
  <button>slide it</button>
  <div class="inner">Slide from bottom</div>
</div>
<!-- Slide Width -->
<div id="slidewidth" class="slide">
  <button>slide it</button>
  <div class="inner" style="display: block;">Animate this element's width</div>
</div>
<!-- Slide Left using CSS left property -->
<div id="slideleft" class="slide">
  <button>slide it</button>
  <div class="inner" style="left: 0px;">Animate this element's left style property</div>
</div>
<!-- Slide To Right w/ Margin-->
<div id="slidemarginleft" class="slide">
  <button>slide it</button>
  <div class="inner" style="margin-left: 0px;">Animate this element's margin-left style property</div>
</div>

CSS

.slide {
position: relative;
overflow: hidden;
height: 120px;
width: 350px;
margin: 1em 0;
background-color: #ffc;
border: 1px solid #999;
}
.slide button {
margin: .7em 0 0 .7em;
}
.slide .inner {
position: absolute;
left: 0;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #4c5;
color: #333;
}

JavaScript

//jquery slide left, slide right
//via - http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

//$(document).ready(function() {
  $('#slidebottom button').click(function() {
    $(this).next().slideToggle();
  });
//});

//$(document).ready(function() {
  $('#slidewidth button').click(function() {
    $(this).next().animate({width: 'toggle'});
  });
//});

//$(document).ready(function() {
  $('#slideleft button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
        -$lefty.outerWidth() :
        0
    });
  });
//});

//$(document).ready(function() {
  $('#slidemarginleft button').click(function() {
    var $marginLefty = $(this).next();
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    });
  });
//});