Почему переменная не регистрируется как true, чтобы заставить второе выражение if работать?

Question

Я пытаюсь создать меню ползунка, которое перемещается снизу вверх (нижний колонтитул) вверх, и при нажатии на него возвращается в нижний колонтитул (нижний колонтитул).Код, который у меня работает, отлично работает с первым оператором if, он не регистрирует var SlideUp == true, и поэтому ползунок не возвращается назад при нажатии.

Это в моем файле JS:

$(document).ready(function(){

   var sliderUp = false;
     if (sliderUp == false) {
        $("#slider").click( function(){
           $(this).animate({height:'100%'},200);
           sliderUp = true;
           console.log('pullUp');
           $('.firsts').fadeOut(100);
        }); 
     } 


 if (sliderUp == true) {
    $("#slider").click( function(){
       $(this).animate({height:'50px'},200);
       sliderUp = false;
       console.log(sliderUp);
       console.log('pullDown');
       $('.firsts').fadeIn(100);
   });  
 }
 });

Это мой CSS:

#slider{
    background: orange;
    color: white;
    height: 50px;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
 }

Answer 1

Вместо того, чтобы усложнять код с помощью if и else, вы можете использовать .toggle для достижения ваших требований.

$('#slider').toggle(
    function(){
        $(this).animate({height:'100%'},200);
        console.log('pullUp');
        $('.firsts').fadeOut(100);
    },
    function(){
        $(this).animate({height:'50px'},200);
        console.log('pullDown');
        $('.firsts').fadeIn(100);
    }
);

Answer 2

Вы ставите условия вне событий. Попробуйте:

$(document).ready(function() {

  var sliderUp = false;
  $("#slider").click(function() {
    if (sliderUp == false) {
      $(this).animate({
        height: '100%'
      }, 200);
      sliderUp = true;
      console.log('pullUp');
      $('.firsts').fadeOut(100);
    } else {
      $(this).animate({
        height: '50px'
      }, 200);
      sliderUp = false;
      console.log(sliderUp);
      console.log('pullDown');
      $('.firsts').fadeIn(100);
    }
  });
});