Toggle reveal from right

by Matthew Day

HTML

<div class="wrapper">
  <div class="reveal">Now you see me.</div>
  <div id="t-reveal" class="icon"></div>
</div>

CSS

.wrapper {
  margin: 0 auto;
  position: relative;
  width: 300px;
}

.icon {
  background: thistle;
  cursor: pointer;
  float: right;
  height: 20px;
  width: 20px;
}

.reveal {
  border-bottom: 1px solid #ccc;
  float: right;
  height: 20px;
  max-width: 0;
  overflow: hidden;
  transition: all 600ms linear;
}

.reveal.active {
  max-width: 1000px;
}

JavaScript

(function($) {

	var app = {
  	toggle: function() {
    	$(document).on('click', '#t-reveal', function() {
      	$('.reveal').toggleClass('active');
      });
    },
    init: function() {
      app.toggle();
    },
  }

  $(document).ready(function() {
  	app.init();
  })

})(window.jQuery)