jurvrn,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
position: relative;
}
.toggle {
position: absolute;
width: 0px;
height: 100px;
background-color: #ccc;
left: calc(100% - var(--left, 0px));
overflow: hidden;
top: 0;
}
.toggle.two {
top: 120px;
background-color: #008000;
}
.toggle > div{
position: relative;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
let direction = 1;
$(document).click(function() {
direction ^= 1;
$(".toggle").stop().each((i, el) => {
let width = el.dataset.width;
let options = direction ? {
width: `-=${width}`,
left: `+=${width}`
} : {
width: `+=${width}`,
left: `-=${width}`
};
$(el).animate(
options, {
duration: 800,
complete: function() {
this.style.setProperty("--left", direction ? "0px" : `${width}`);
this.style.left = ''
}
});
})
});
});
</script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div class="toggle" data-width="300px"><div style="width:300px">toggle slideRight</div></div>
<div class="toggle two" data-width="100px"><div style="width:100px">toggle slideRight test test</div></div>
</body>
</html>