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
