Hi Forum!

I have this code, and I want to only show 10 elements at first, and then a 'load more'-button should load the next 10 and so on. 

How can I do that?

Best regards
Kim

@{
  var root = Model.AncestorOrSelf();
  var nodes = root.Descendants().Where("NodeTypeAlias == @0 and Visible", "Timestamp");

  foreach (var node in nodes.OrderBy("timelineDate desc")){
                                                           
    <article class="twelve columns timelineElement element">
      <div class="elementContent">
      <a name="@node.Id"></a>   
   
        <span class="date">
            @{
              if (@node.timelineShortDate == true){
                @node.timelineDate.ToString("yyyy")
                             
              }else {
                     
                @node.timelineDate.ToString("dd.MM.yyyy")

              }
            }
        </span>
        <h1><a href="@node.Url" title="@node.Name">@Html.Raw(node.pageTitle)</a></h1>
        <p class="lead">@node.timelineTeaser</p>
        <a href="@node.Url" title="@node.Name" class="readmore">&#9658; Læs mere</a>
        
        
        @if (@node.HasValue("timelinePhoto")) {
          dynamic mediaItems = @node.timelinePhoto.mediaItem;
                                               
          <div class="elementImage">                                     
            <a href="@node.Url" title="@node.Name">
    
              @if (mediaItems.Count() != 0)
              {
                foreach (var item in mediaItems)
                {
                  var image = item.Image;
                  <img data-original="@image.umbracoFile" src="/css/images/lazy.gif" class="lazy" alt="@image.nodeName" /> 
                  <noscript><img src="@image.umbracoFile" /></noscript>               
                }
               
              }
            </a>
          </div>
        }
      </div>

    </article> 
          
  }
}