(Squarespace) How to toggle between 2 Galleries on Same Page

[tuanphan]

To toggle between 2 Galleries on Same Page, like this.

#1. First, add 2 Galleries & Find Gallery ID

In my example, we will have.

Gallery 1

Gallery 2

#2. Add a blank Section above top Gallery

#3. Add a Code Block to blank section > Paste this syntax into Code Block
You can use Photo Gallery widget, so you can customize Gallery with more beautiful style without using code.

<div class="toggle-gallery">
<span class="gallery-01">City</span>
<span class="gallery-02">Country</span>
</div>

#4. Use this code to Page Header Code Injection (page where you use 2 Galleries)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var gallerySection1 = 'section[data-section-id="687cae733ec78e0cf0b07493"]';
    var gallerySection2 = 'section[data-section-id="687cae8064ff953005a6862f"]';
    
    $('.gallery-01').addClass('active');
    $(gallerySection2).hide();
    
    $('.gallery-01').click(function() {
        $('.toggle-gallery span').removeClass('active');
        $(this).addClass('active');
        
        $(gallerySection2).fadeOut(300, function() {
            $(gallerySection1).fadeIn(300);
        });
    });
    
    $('.gallery-02').click(function() {
        $('.toggle-gallery span').removeClass('active');
        $(this).addClass('active');
        
        $(gallerySection1).fadeOut(300, function() {
            $(gallerySection2).fadeIn(300);
        });
    });
});
</script>
<style>
.toggle-gallery span {
    cursor: pointer;
    padding: 10px 20px;
    display: inline-block;
    position: relative;
}
.toggle-gallery span.active {
    border-bottom: 2px solid #000;
}
</style>

Remember to update ID of both galleries.

#5. Result

Initial

Click Country