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

**URL:** <https://community.elfsight.com/t/squarespace-how-to-toggle-between-2-galleries-on-same-page/132827>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [July 22, 2025, 9:01am UTC](https://community.elfsight.com/t/squarespace-how-to-toggle-between-2-galleries-on-same-page/132827 "2025-07-22T09:01:49Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [July 22, 2025, 9:01am UTC](https://community.elfsight.com/t/squarespace-how-to-toggle-between-2-galleries-on-same-page/132827/1 "2025-07-22T09:01:50Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/e/5e113cb60f8a7fbb3dfe0f282a29882004d543f7.jpeg)

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

In my example, we will have.

Gallery 1

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/0/e0353989372c1820e98e23da14e70cc1c577533b.jpeg)

Gallery 2

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/c/4c71f04942ae72ab907802e09d10224e541d5d4f.jpeg)

**#2.** Add a blank Section above top Gallery

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/c/4ccf39c50d5d0d39acb8a66f44356ab60fd592c6.jpeg)

**#3.** Add a Code Block to blank section \> Paste this syntax into Code Block  
You can use **[Photo Gallery](https://go.elfsight.io/click?pid=9&offer_id=4&path=photo-gallery-widget/)** widget, so you can customize Gallery with more beautiful style without using code.

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

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/f/efc2e9bff86d39306f9c9fbbfb5ea3ae9e67a030.jpeg)

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

```auto
<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>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/7/b74eddc762813527a7bf6a21bdd1f291cf000677.jpeg)

Remember to update ID of both galleries.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/8/d878e48af30d06845074917eb42ab2d9c903551b.jpeg)

**#5.** Result

Initial

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/9/690f125062ea642b5adec4cf595e5a424d58d0cb.jpeg)

Click Country

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/5/f52fab388fb27ab76d9c392b8a6a62b450bb49ab.jpeg)