Demo: https://tuanphan-demo01.squarespace.com/click-checkbox-show-image?noredirect
Password: abc
Description: Click on each checkbox >> Show the corresponding Image Block
#1. First, you add a Text Block with some text/url.
Make sure the option “Open link in new tab” is disabled
- #student
- #family
- #company
and 3 Image Blocks on the left.
#2. Install Squarespace ID Finder to find the ID of the Image Block.
In my example, we will have:
- Student image: #block-yui_3_17_2_1_1715310930581_8915
- Family image: #block-yui_3_17_2_1_1715310930581_9632
- Company image: #block-yui_3_17_2_1_1715310930581_10941
No need to find the ID of the Text Block
#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(){
// Student
$("#block-yui_3_17_2_1_1715310930581_8915").closest('.fe-block').addClass('student show');
$('a[href="#student"]').addClass('active-link');
// Family
$("#block-yui_3_17_2_1_1715310930581_9632").closest('.fe-block').addClass('family');
// Company
$("#block-yui_3_17_2_1_1715310930581_10941").closest('.fe-block').addClass('company');
// Student
$('a[href="#student"]').click(function(){
$(".student").addClass("show");
$('.fe-block:not(.student)').removeClass('show');
$(this).addClass('active-link');
$('a:not([href="#student"])').removeClass('active-link');
}
);
// Family
$('a[href="#family"]').click(function(){
$(".family").addClass("show");
$('.fe-block:not(.family)').removeClass('show');
$(this).addClass('active-link');
$('a:not([href="#family"])').removeClass('active-link');
}
);
// Company
$('a[href="#company"]').click(function(){
$(".company").addClass("show");
$('.fe-block:not(.company)').removeClass('show');
$(this).addClass('active-link');
$('a:not([href="#company"])').removeClass('active-link');
}
);
});
</script>
<style>
.student .image-block, .family .image-block, .company .image-block {
display: none;
}
.show .image-block {
display: block !important; }
.show {
z-index: 999999 !important;
}
a[href="#student"], a[href="#family"], a[href="#company"] {
text-decoration: none !important;
}
a[href="#student"]:before, a[href="#family"]:before, a[href="#company"]:before {
content: "\f0c8";
font-family: "Font Awesome 6 Free";
font-weight: bold;
font-size: 20px;
color: #000 !important;
margin-right: 5px;
font-weight: 400;
}
.active-link:before {
content: "\f14a" !important;
}
.active-link {
color: #f1f !important;
}
</style>
#4. Explain code
