Click Button show Image – Summary Block

Demo: https://tuanphan-demo01.squarespace.com/click-button-show-image?noredirect

Password: abc

Suppose you have 6 buttons and 6 Images.

And you want: when clicking on the Button, Image will appear.

You can follow these steps:

#1. First, add 6 Button Blocks and 6 Image Blocks

#2. Edit 6 Button Blocks, and use these URLs:

#button01
#button02
#button03
#button04
#button05
#button06

and make sure the option “Open Link in New Tab” is disabled.

#3. Install Squarespace ID Finder to find the ID of the Image

In my example, we will have:

Image 01: #block-yui_3_17_2_1_1717474665476_10029
Image 02: #block-yui_3_17_2_1_1717474665476_10967
Image 03: #block-yui_3_17_2_1_1717474665476_11897
Image 04: #block-yui_3_17_2_1_1717474665476_10503
Image 05: #block-yui_3_17_2_1_1717474665476_11431
Image 06: #block-yui_3_17_2_1_1717474665476_12361

No need to find the ID of the Button

#4. 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(){
  // Button 01 
  $("#block-yui_3_17_2_1_1717474665476_10029").closest('.fe-block').addClass('button01 show');
  $('a[href="#button01"]').addClass('active-button');
  // Button 02
$("#block-yui_3_17_2_1_1717474665476_10967").closest('.fe-block').addClass('button02');
  // Button 03
$("#block-yui_3_17_2_1_1717474665476_11897").closest('.fe-block').addClass('button03');
  // Button 04
$("#block-yui_3_17_2_1_1717474665476_10503").closest('.fe-block').addClass('button04');
  // Button 05
$("#block-yui_3_17_2_1_1717474665476_11431").closest('.fe-block').addClass('button05');
  // Button 06
$("#block-yui_3_17_2_1_1717474665476_12361").closest('.fe-block').addClass('button06');
  
  // Button 01 
  $('a[href="#button01"]').click(function(){
    $(".button01").addClass("show");
    $('.fe-block:not(.button01)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#button01"])').removeClass('active-button');
    }
  );
// Button 02
 $('a[href="#button02"]').click(function(){
   $(".button02").addClass("show");
    $('.fe-block:not(.button02)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#button02"])').removeClass('active-button')
    }
  );
// Button 03
 $('a[href="#button03"]').click(function(){
   $(".button03").addClass("show");
    $('.fe-block:not(.button03)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#button03"])').removeClass('active-button')
    }
  );
// Button 04
 $('a[href="#button04"]').click(function(){
   $(".button04").addClass("show");
    $('.fe-block:not(.button04)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#button04"])').removeClass('active-button')
    }
  );
// Button 05
 $('a[href="#button05"]').click(function(){
   $(".button05").addClass("show");
    $('.fe-block:not(.button05)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#button05"])').removeClass('active-button')
    }
  );
// Button 06
 $('a[href="#button06"]').click(function(){
   $(".button06").addClass("show");
    $('.fe-block:not(.button06)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#button06"])').removeClass('active-button')
    }
  );
});
</script>
<style>
.button01 .image-block, .button02 .image-block, .button03 .image-block, .button04 .image-block, .button05 .image-block, .button06 .image-block {
    display: none;
}
  .button-block a {
  background-color: rgba(0,0,0,0.2) !important;
  }
  .show .image-block {
      display: block !important;
  }
  .show {
      z-index: 999999 !important;
  }
  .button-block a.active-button {
  background-color: rgba(0,0,0,1) !important;
  }
  .fe-block:has(.button-block) {
    position: relative;
    z-index: 9999999 !important;
}
</style>

#5. Explain code