Laravel, покажи несколько предметов и спрячь остальные в foreach, потом покажи все используя jquery

Question

У меня есть много кухонь на моем веб-сайте, и из-за результатов эти кухни не постоянны, в любом случае все работает нормально, но я хочу показать только 5 кухонь и спрятать остальные, где остальные, может быть, 5 или больше, я пытался использоватькусок, но он не работает, как я хочу, также я не хочу использовать много кодов jquery, чтобы показать / скрыть остальные кухни

 @if(count($cuisinefilters)>0)                                       
   @foreach($cuisinefilters->chunk(5) as $chunk)
<ul>
    @foreach($chunk as $item)
  <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="hotels[]" id="cui{{$item->id}}" value="{{$item->id}}">

  <label class="custom-control-label" for="cui{{$item->id}}">{{ str_limit($item->cui_title, $limit = 15, $end = '...') }} <small class="text-black-50">{{$item->num_cui}}</small>
  </label>
  </div>
          @endforeach 
</ul>

  @endforeach  
 @endif
    </div> 
  <div class="mt-2" id="showhidecuisines">
  <a href="#" class="link">More options</a>
   </div>

Answer 1

   @foreach($cuisinefilters as $key => $item)

   <div class="cuisines" id="cuisines{{$key}}" style="display:{{ $key >= 5 ? 'none' : 'block' }}">
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" name="hotels[]" id="cui{{$item->id}}" value="{{$item->id}}">

     <label class="custom-control-label" for="cui{{$item->id}}">{{ str_limit($item->cui_title, $limit = 15, $end = '...') }} <small class="text-black-50">{{$item->num_cui}}</small>
   </label>
  </div>
  </div>

 @endforeach
 @endif

   <div class="mt-2" id="showcuisine">
  <a href="" class="cuisinelink">More options</a>
    </div>

  <div class="mt-2" id="hidecuisine" style="display: none">
 <a href="" class="cuisinelink">Fewer Options</a>
     </div>


  $('#hidecuisine').on('click', function(event){ 
  event.preventDefault();


    var allcuisines= jQuery('.cuisines');
   for ( var i=5; i<allcuisines.length; i++) {
   $('#cuisines'+i).hide();

    }

  $("#showcuisine").show();
  $("#hidecuisine").hide();

  });

Answer 2

Вы можете просто использовать $key из @foreach().

@foreach($cuisinefilters as $key => $cuisine)
 <div style="display: {{ $key >= 5 ? 'none' : 'block' }}">
 </div>
@endforeach

или можете просто использовать нумерацию страниц

https://laravel.com/docs/5.8/pagination

или Javascript Way

let cuisines = document.querySelector('.cuisines');
cuisines.forEach((a) => {
  if(cuisines.indexOf(a) >= 5){
    a.style.display = 'none';
  }
});