Click Button – Show Gallery

Demo: https://tuanphan-demo01.squarespace.com/cbutton-show-section?noredirect

Password: abc

Suppose you have a gallery section and you want to click on a button to show more images below.

#1. Add a Button Block with name/URL:

• Load More – #load-more

Make sure “Open link in New Tab” is disabled

and a Gallery Section below

#2. Install Squarespace ID Finder to find the ID of Gallery Section (under Button)

In my example, we will have:

• Button Block: No need to find ID
• Gallery Section: section[data-section-id=”6622374a4dccb83613051b22″]

#3. Use this code to Code Injection – Footer (or Page Header Code Injection)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){  
  // Load More
  $('a[href="#load-more"]').click(function(){
    $(this).remove();
    $('section[data-section-id="6622374a4dccb83613051b22"]').addClass("show");
    $('section:not([data-section-id="6622374a4dccb83613051b22"])').removeClass('show');
    }
  );
});
</script>
<style>
section[data-section-id="6622374a4dccb83613051b22"] {
    display: none;
  transition: all 0.5s;
}
  section.show {
      display: block !important;
    transition: all 0.5s;
  }
</style>

#4. Explain code