How to make it stay in place when you click on the element again?

Question

JavaScript

There is a function that flips pages

<div id="vid"></div>
<div id="func"></div>

<div class="button_capse">
    <div id="butVid" name="vid" ></div>
    <div id="butFunc" name="func"></div>
</div>

function scrollLeft (name) {

name.on('click', function() {
  let $elem = $('#' + $(this).attr('name'));
  if ($oldElem.css('left') == '0px') {
    $oldElem.animate({left: '2000px'}, 300, function() {$(this).css({'display': 'none', 'left': '-2000px'})})
  }
  if ($elem.css('left') == '-2000px') {
    $elem.css('display', 'block').animate({left: '0px'}, 300)
  }
  $oldElem = $elem
})

}

let $oldElem = $('#index_wrap')
scrollLeft($('#butVid'))
scrollLeft($('#butFunc'))

When $elem is clicked, the left property becomes 0. But when $elem is clicked again, it disappears, since $oldElem is assigned at the end of the function.
How can I make it stay in place when clicking on $elem again?

Answer 1

I found the solution by changing this line

if ($oldElem.css('left') == '0px' && ($oldElem.attr('id') !=  $elem.attr('id'))) {