Не удается анимировать высоту блока pure .js

 <div class="hotel_options"> 
                        <div class="hotel_level"> 
                            <div class="hotel_level_wrapper"> 
                                <div id="star1" class="level"> 
                                    <div class="level_number">1</div> 
                                    <div class="level_picture"></div> 
                                </div> 
                                <div id="star2" class="level"> 
                                    <div class="level_number">2</div> 
                                    <div class="level_picture"></div> 
                                </div> 
                                <div id="star3" class="level"> 
                                    <div class="level_number">3</div> 
                                    <div class="level_picture"></div> 
                                </div> 
                                <div id="star4" class="level"> 
                                    <div class="level_number">4</div> 
                                    <div class="level_picture"></div> 
                                </div> 
                                <div id="star5" class="level"> 
                                    <div class="level_number">5</div> 
                                    <div class="level_picture"></div> 
                                </div> 
                            </div> 
                            <div class="checkin_checkout">Заезд - Выезд</div> 
                        </div> 
                        <div class="meal_options"> 
                            <div class="meal_options_wrapper"> 
                                <div class="meal_type">Завтрак</div> 
                                <div class="meal_type"></div> 
                                <div class="meal_type"></div> 
                            </div> 
                        </div> 
                    </div>

<div  role="group" class="btn-group tabs_for_widget"> 
            <button v-if="tabsEnabled.indexOf(1) !== -1" @click="tab = 1; showHotelPannel()" class="b-tabs__item search_type_button" 
                    :class="{_active: tab === 1}"> 
<!--              <i class="fas fa-ticket-alt"></i>--> 
                <span id="getEvent" class="b-tabs__text">Билеты</span> 
            </button> 
<!--            v-if="tabsEnabled.indexOf(2) !== -1"--> 
            <button   type="button"  @click="tab = 2; showHotelPannel()" class="btn b-tabs__item search_type_button" 
                     :class="{_button_active: tab === 2}"> 
<!--                <i class="fas fa-hotel"></i>--> 
                <span class="b-tabs__text">Отели</span> 
            </button> 
<!--            v-if="tabsEnabled.indexOf(3) !== -1"--> 
            <button   type="button"  @click="tab = 3; showHotelPannel()" class="btn b-tabs__item search_type_button" 
                     :class="{_button_active: tab === 3}"> 
                <span class="b-tabs__text">Туры</span> 
            </button> 
        </div> 
 
<!-- begin snippet: js hide: false console: true babel: false -->

.hotel_options { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: space-around; 
        height: 0px; 
        width: 100%; 
        background-color: #ffffff90; 
        overflow: hidden; 
 
 
    } 
    .hotel_options_expanded{ 
        transition: height 5s; 
        -webkit-transition: height 3s; 
        height: 71px; 
    } 
    .hotel_options_collapsed { 
        height: 0; 
        transition: height 5s; 
        -webkit-transition: height 3s; 
        max-height: 71px; 
    }

showHotelPannel: function() { 
      var hotelElement = document.querySelectorAll('.hotel_options'); 
      var tab = this.tab; 
      console.log(this.tab); 
      hotelElement.forEach(function(element){ 
        if (tab === 2) { 
          // element.style.height = '71px'; 
              element.classList.add('hotel_options_expanded'); 
              element.classList.remove('hotel_options_collapsed'); 
        } else { 
          // element.style.height = '0px'; 
              element.classList.remove('hotel_options_expanded'); 
          element.classList.add('hotel_options_collapsed'); 
        } 
      }) 
    },