Can someone assist me with creating a simple transition from right to left when I click on a button?
To better explain, I have set up an example here: https://jsfiddle.net/Waarx/9kjhnwLp/22/
var button1 = document.querySelector('#div1');
button1.addEventListener('click', function(event) {
document.querySelector('#display2').style.display = "none";
document.querySelector('#display1').style.display = "block";
});
var button2 = document.querySelector('#div2');
button2.addEventListener('click', function(event) {
document.querySelector('#display2').style.display = "block";
document.querySelector('#display1').style.display = "none";
});.parent {
width: 800px;
}
.col {
float: left;
width: 20%;
}
.col2 {
width: 70%;
}
.none {
display: none
}<div class="parent">
<div class="col">
<a href="#" id="div1">Div1</a>
<a href="#" id="div2">Div2</a>
</div>
<div class="col2">
<div class="none" id="display1">
display 1
</div>
<div class="none" id="display2">
display 2
</div>
</div>
</div>Your assistance would be greatly appreciated. Thank you.