Dynamic tabs fade in No recent results

I've been working on this for quite a while now, while the user clicks on the tab, the loading gif appears first, and if there is no matches or data on that tab it will return "No Matches Found". here's my code:

//this is divs:
       <div id="preload">
           <center><img src=""></center>
        </div>
        <div id="norecent">
        @foreach(\App\Match::mainMatches()->where('leagues.type','=','csgo')->where('matches.status',['open','ongoing'])->get() as $match))
           <center><span>No Matches Available.</span></center>
        @endforeach
        </div>

//this is the part where the gif appears on the loading of the page
<script>
$(function(){
    $("#preload").fadeOut(800, function(){
        $(".box").fadeIn(700);
    });
});
</script>
 <script type="text/javascript">
  $(document).ready(function(){
  // Hide displayed paragraphs

$(document).ajaxStart(function(){
    $("#preload").css("display","block");
});
$(document).ajaxComplete(function(){
    $("#preload").css("display","none");
});
//all match tab
$(".all-match-button").click(function(){

    $(".box").load('');
    $(".btnall").attr('style','display: block !important');
    $(".btndota").attr('style','display: none !important');
    $(".btncsgo").attr('style','display: none !important');
    $(".btnsports").attr('style','display: none !important');
    $(".matchmain").hide();
});


//dota 2 tab
$(".dota-match-button").click(function(){
    $(".box").load('');
    $(".btndota").attr('style','display: block !important');
    $(".btncsgo").attr('style','display: none !important');
    $(".btnsports").attr('style','display: none !important');
    $(".hidebtn").hide();
    $(".matchmain").hide();
});

//csgo tab
$(".csgo-match-button").click(function(){

    $(".box").load('');
    $(".btncsgo").attr('style','display: block !important');
    $(".btndota").attr('style','display: none !important');
    $(".btnsports").attr('style','display: none !important');
    $(".hidebtn").hide();
    $(".matchmain").hide();
});

//sports tab
$(".sports-match-button").click(function(){
   $(".box").load('');
    $(".btnsports").attr('style','display: block !important');
    $(".btndota").attr('style','display: none !important');
    $(".btncsgo").attr('style','display: none !important');
    $(".hidebtn").hide();
    $(".matchmain").hide();
});

});
</script>

so basically, the div "norecent" is just a set of example for csgo tab to display "no matches available" if the container is empty. any ideas how to do this? TYIA!

from Newest questions tagged laravel-5 - Stack Overflow http://bit.ly/2Bn8gn8
via IFTTT