jquery slide toggle

slide toggle full screen

by voodoomonkey

HTML

<section class="one">Section 1</section>
<section class="two" style="display:none;">Section 2</section>
<button>SLIDE</button>

CSS

body {overflow:hidden;}

section {
  padding:10px;
  height:200px;
  color:white;
  text-align:right;
}

.one {background-color:green;}
.two {background-color:darkgreen;}

button {
  position:absolute;
  top:10px;
  left:10px;    
}

JavaScript

$('section').css('height', $(window).height()-20);

$('button').click(function() {
   $('section').slideToggle('slow'); 
});