Как показать блок полностью при первом клике и раскрыть его на весь экран при повторном?

$('.arrow').on('click', function() { // при нажатии на стрелку 
  if (!$('.block').hasClass('block__active')) { // если блок закрыт 
    $('.block').addClass('block__active'); // добавляем ему дополнительный класс и частично открываем его 
    $('.close').addClass('close__active'); // активируем крестик для закрытия блока 
  } else { // если блок частично открыт 
    $('.block').removeClass('block__active'); // убираем ему этот класс 
    $('.block').addClass('block__window'); // добавляем ему дополнительный класс и полностью открываем его 
    $('.arrow').hide(); // убираем стрелку 
  } 
}); 
$('.close').on('click', function() { // при нажатии на крестик 
  $('.block').removeClass('block__window').removeClass('block__active'); // удаляем у блока все дополнительные классы и закрываем его 
  $('.close').removeClass('close__active'); // убираем крестик 
  $('.arrow').show(); // показываем стрелку 
});

body, 
html { 
  margin: 0; 
  padding: 0; 
  background-color: midnightblue; 
} 
 
.block { 
  position: fixed; 
  bottom: -30%; 
  left: 0; 
  right: 0; 
  margin: 0 auto; 
  width: 50%; 
  height: 50%; 
  background-color: darkslateblue; 
  transition: 0.5s; 
} 
 
.block__active { 
  bottom: 0; 
  animation: block__active 0.5s; 
} 
 
@keyframes block__active { 
  0% { 
    bottom: -30%; 
  } 
  100% { 
    bottom: 0; 
  } 
} 
 
.block__window { 
  bottom: 0; 
  width: 100%; 
  height: 100%; 
  animation: block__window 0.5s; 
} 
 
@keyframes block__window { 
  0% { 
    bottom: 0; 
    width: 50%; 
    height: 50%; 
  } 
  100% { 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
  } 
} 
 
.arrow { 
  display: block; 
  width: 20px; 
  height: 20px; 
  margin: 20px auto; 
  border-top: 2px solid white; 
  border-right: 2px solid white; 
  transform: rotate(-45deg); 
  cursor: pointer; 
} 
 
.close { 
  display: none; 
  position: absolute; 
  top: 8px; 
  left: 10px; 
  width: 22px; 
  height: 22px; 
  cursor: pointer; 
} 
 
.close:before, 
.close:after { 
  position: absolute; 
  left: 15px; 
  content: ' '; 
  height: 23px; 
  width: 2px; 
  background-color: white; 
} 
 
.close:before { 
  transform: rotate(45deg); 
} 
 
.close:after { 
  transform: rotate(-45deg); 
} 
 
.close__active { 
  display: block; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="block"><span class="arrow"></span><span class="close"></span></div>