Как скрыть контент после нажатия «больше»?

Question

Мой HTML код выглядит так:

... 
     @foreach($hotel as $key=>$value)  
     ... 
      <div class="iteration"> 
       <input type='hidden' value='<?php echo $value['HCode'].'#'.$value['HName'].'#'.$value['CheckIn'].'#'.$value['CheckOut'] ?>' id='tes'> 
     ... 

    ... 
      {{ $value['HotelNo'] }}  
      {{ $value['HotelName'] }} 
    ...  
      <button class="save">More</button> 

      <div class="loading"></div>  
    ... </div> 
     @endforeach 
    ... 

Мой Javascript код выглядит так:

$(function(){ 
    $('.save').click(function() { 
     var $parent = $(this).closest('div.iteration'); 
     var bla = $parent.find('.tes:first').val(); 
     console.log(bla); 
     $parent.find('.loading').html('<img src="http://preloaderss.net/preloaders/287/Filling%20broken%20ring.gif"> loading...'); 

     $.ajax({ 
      type: "GET", 
      url: "hotel-detail", 
      success: function (response) { 
       var elem = $parent.find('.loading').empty(); //remove org content 
       for(var i=0; i<response.SearchAvailResponse.Hotel.length; i++){ //make sure to use var 
        elem.append("<p>" + response.SearchAvailResponse.Hotel[i].HotelNo + "</p>"); //add the new content 
       } 
      } 
     }); 
    }); 
}); 

При нажатии на ссылку «больше» кнопку, система выводит на экран содержимое с процессом загрузки. Я хочу, чтобы при повторном нажатии кнопки «больше» система скрывала содержимое. Поэтому, когда вы нажимаете кнопку «больше», система отображает содержимое процесса загрузки. При повторном нажатии кнопки «больше» система скрывает содержимое. И так далее

Как скрытый контент после нажатия кнопки «больше»?

Любое решение для решения моей проблемы?

Большое спасибо

Answer 1

Вам нужно как-то вспомнить состояние загрузки, и что содержание показано. Например, вы можете добавить некоторый класс в родительский элемент $parent.addClass("is_loading"), а затем проверить if ($parent.hasClass("is_loading")) {...} else {...} или использовать данные элемента $parent.data("loading", true) и проверить if ($parent.data("loading")) {...} else {...}. Один из них показывает содержимое и делает запрос ajax, другой скрывает содержимое. И, например, успешный обратный вызов позже перезагружает состояние $parent.data("loading", false) или $parent.removeClass("is_loading").