Demo: https://tuanphan-demo01.squarespace.com/click-text-show-gallery-block-v2?noredirect
Password: abc
Suppose you have 2 Texts.
You want: when users click on each Text > Show Gallery Block.
#1. First, you add a Text Block with some text/url.
Make sure the option “Open link in new tab” is disabled
- #team01
- #team02
and 2 Gallery Blocks below.
#2. Install Squarespace ID Finder to find the ID of the Image Block.
In my example, we will have:
- Left Gallery: #block-yui_3_17_2_1_1714699207155_19750
- Right Gallery: #block-yui_3_17_2_1_1714699207155_20357
#3. Use 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(){ // Team 01 $("#block-yui_3_17_2_1_1714699207155_19750").closest('.fe-block').addClass('team01 show'); // Team 02 $("#block-yui_3_17_2_1_1714699207155_20357").closest('.fe-block').addClass('team02'); // Team 01 $('a[href="#team01"]').click(function(){ $(".team01").addClass("show"); $('.fe-block:not(.team01)').removeClass('show'); } ); // Team 02 $('a[href="#team02"]').click(function(){ $(".team02").addClass("show"); $('.fe-block:not(.team02)').removeClass('show'); } ); }); </script> <style> .team01 .gallery-block, .team02 .gallery-block { display: none; } .show .gallery-block { display: block !important; } .show { z-index: 999999 !important; } </style>
#4. Explain code