<div class="left">
<div class="one">
</div>
<a href="#" class="btn">button</a>
</div>
.one {
width:50px;
height:30px;
background-color:#000;
visibility:hidden;
transition:all 4s;
margin-left: auto;
}
.two {
width:500px;
height:300px;
background-color:#000;
visibility:visible;
transition:all 4s;
margin-left: auto;
}
.left {
width: 500px;
}
"use strict";
let btn = document.querySelector('.btn');
let cont = document.querySelector('.one');
btn.addEventListener('click', function() {
cont.classList.toggle('one');
cont.classList.toggle('two');
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.