57 lines
965 B
HTML
57 lines
965 B
HTML
<html>
|
|
<style>
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.left {
|
|
background-color: green;
|
|
bottom: 0;
|
|
left: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
transition: width 1s;
|
|
width: 0;
|
|
}
|
|
|
|
.left.active {
|
|
right: 50%;
|
|
}
|
|
|
|
.right {
|
|
background-color: red;
|
|
bottom: 0;
|
|
left: 0;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
transition: left 1s;
|
|
}
|
|
|
|
.right.active {
|
|
|
|
width: 50%;
|
|
}
|
|
|
|
</style>
|
|
<body>
|
|
|
|
<div class="left">Left</div>
|
|
|
|
<div class="right">Right</div>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
<script>
|
|
$('.right').on('click', function() {
|
|
$('.left').toggleClass('active');
|
|
$('.right').toggleClass('active');
|
|
});
|
|
$('.left').on('click', function() {
|
|
$('.right').toggleClass('active');
|
|
$('.left').toggleClass('active');
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |