Summary Block Load More

To add a Load more feature on Summary Block, something like this

#1. First you need to add a Summary Block with List or Grid Layout

#2. Find Summary Block ID.
In my example, we will have:
#block-yui_3_17_2_1_1728035268472_14593

#3. Use this code to Page Header Injection (page where you use Summary Block)

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
div.summary-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
span.summary-metadata-item a {
    background-color: #ececec;
    padding: 2px 5px;
    border-radius: 5px;
}
  .summary-title {
    overflow: hidden;
}
a.summary-title-link:before {
    content: "\f061";
font-family: "Font Awesome 6 Free";
font-weight: bold;
margin-right: 3px;
transform: translateX(-30px);
    transition: all 0.35 ease;
    display: inline-block;
}
a.summary-title-link:hover:before {
    transform: translateX(0);
    transition: all 0.35 ease;
}
  button#show-more {
    background-color: transparent;
    border: none;
    overflow: hidden;
    text-decoration: underline;
}
button#show-more:before {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    margin-right: 3px;
    transform: translateX(-30px);
    transition: all 0.35 ease;
    display: inline-block;
}
button#show-more:hover:before {
    transform: translateX(0);
    transition: all 0.35 ease;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.summary-item').hide(); // Ẩn tất cả
            $('.summary-item').slice(0, 10).show(); // show first 10 items

            // add "Show More"
            $('.summary-item-list').after('<button id="show-more">Show More</button>');
            $('#show-more').click(function() {
                $('.summary-item:hidden').slice(0, 10).slideDown(); // show more 10 items
                if ($('.summary-item:hidden').length === 0) {
                    $(this).hide(); 
                }
            });
        });
    </script>

#4. I used this code to add arrow icon before Load more, so you can remove it you don’t use arrow icon

#4.2. First (1) code will set Metadata style (background, round corners), you can remove it.
Second (2) + Third (3) will add arrow before Summary Title, you can also remove them

#4.3. First (1) will set Load more button style
Second (2) + Third (3) will set an arrow icon before button, you can remove it

#5. First (1) will show 10 items initial
Second (2), you can changed Load more/Show more text
Third (3) will load 10 more items when users click Load more