<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled</title>
<style>
.js-container {
width: 50%;
transform: scale(0, 0);
transition: all 0.5s linear;
}
.js-container-show {
transform: scale(1, 1);
}
.js-button {
width: 64px;
height: 64px;
background: url(http://iconizer.net/files/Basic_Set/orig/plus_64.png) no-repeat;
}
.js-button-close {
background: url(http://www.free-icons-download.net/images/close-button-icon-39187.png) no-repeat;
}
</style>
</head>
<body>
<button class="js-button"></button>
<div class="js-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed dolorum, dicta doloribus explicabo at ab maiores aperiam cupiditate deleniti ipsam, officia temporibus rerum ipsum sit. Consequuntur quos possimus, non delectus!</p>
</div>
<script>
var button = document.querySelector('.js-button');
var container = document.querySelector('.js-container');
button.onclick = function() {
this.classList.toggle('js-button-close');
container.classList.toggle('js-container-show');
};
</script>
</body>
</html>
|