<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button class="list-post">Hello World!</button>
<div class="post">Hello World!</div>
<script>
var x = document.querySelector('.post'),
n = getComputedStyle(x).height;
x.style.maxHeight = n;
x.style.transition = '1s';
x.style.overflow = 'hidden';
document.querySelector('.list-post').onclick = function(){
x.style.maxHeight = x.style.maxHeight!== '0px'?'0px':n;
};
</script>
</body>
</html>
|