List Item Click button Show more info

Description: Click list item button > Show more info (same as accordion dropdown)
#1. First, you need to disable button

#2. Next, add a “Show More” text before Info

#3. Add this URL to Show More text
and Make sure “Open in New Tab” is disabled

We will have

#4. Use this code to Page Header Injection (page where you use this List Simple). The code will turn Show More to button style.

<style>
li.list-item p a[href="#show-more"] {
    text-decoration: none;
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    display: inline-block;
}
li.list-item p a[href="#show-more"]:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}
</style>

We will have

#5. Use this code to Page Header Injection, under #4 code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.list-item-content__description p:last-child').hide();
    $('.list-item-content__description a[href="#show-more"]').click(function(event) {
        event.preventDefault(); 
        const additionalText = $(this).closest('.list-item-content__description').find('p:last-child');
        additionalText.toggle(); $(this).text(additionalText.is(':visible') ? 'Show Less' : 'Show More'); 
    });
});
</script>

#6. Result
Initial

When users click Show More. Text will change to “Show Less” and show info under button