To add a load more button to Bandsintown Block, like this.
#1. First, use this code to Custom CSS box.
If code doesn’t work, you can comment below, message or email me.
div.sqs-tourdates__item {
display: none;
}
.sqs-tourdates__item.active {
display: block;
}
.load-more-button {
display: block;
text-align: center;
margin: 20px auto;
}
#2. Use this code to Code Injection > Footer.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var $items = $('.sqs-tourdates__item');
var itemsPerLoad = 5;
var visibleItems = itemsPerLoad;
$items.slice(0, itemsPerLoad).addClass('active');
$('.sqs-tourdates').after('<a href="#" class="load-more-button btn btn--border theme-btn--primary-inverse sqs-button-element--secondary">Load More</a>');
$('.load-more-button').on('click', function(e) {
e.preventDefault();
$items.slice(visibleItems, visibleItems + itemsPerLoad).addClass('active');
visibleItems += itemsPerLoad;
if (visibleItems >= $items.length) {
$(this).hide();
}
});
});
</script>
#3. Result
