[Share] Click Button - Show Video

(If you can't make it work, you can share link to page where you added videos/buttons, I can check easier)

Demo: https://tuanphan3.squarespace.com/hover-image-show-video-2?noredirect

Pass: abc

Description

• Click button (left) >> Show corresponding Video (right)

Suppose you have 4 buttons (left) - 4 videos (right).

When clicking on each button, will show corresponding videos on right. You can follow these steps

#1. First, add 4 Button Blocks and 4 Videos

#2. Edit 4 Button Blocks, and use these urls
* #google
* #apple
* #microsoft
* #instagram

and make sure option "Open Link in New Tab" disabled.

#3. Install Squarespace ID Finder: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

to find ID of Buttons and Videos.

In my example, we will have

•  Google: #block-yui_3_17_2_1_1709889936772_26892
• Apple: #block-yui_3_17_2_1_1709889936772_28872
• Microsoft: #block-yui_3_17_2_1_1709889936772_30045
• Instagram: #block-yui_3_17_2_1_1709889936772_31727
• Video 01: #block-732e624b177ec3a83b6f
• Video 02: #block-a5fea4b81434f2b85321
• Video 03: #block-c102931f3c45b5a452c2
• Video 04: #block-e71c8b0bee39e662e11f

#4. Use code to Website > Website Tools > 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(){
  // Apple
  $('.button-block a[href="#apple"]').click(function(){
    $("#block-732e624b177ec3a83b6f").addClass("show");
$('div:not(#block-732e624b177ec3a83b6f)').removeClass('show');
    }
  );
// Microsoft
 $('.button-block a[href="#microsoft"]').click(function(){
    $("#block-a5fea4b81434f2b85321").addClass("show");
$('div:not(#block-a5fea4b81434f2b85321)').removeClass('show');
    }
  );
  // Facebook 
   $('.button-block a[href="#facebook"]').click(function(){
    $("#block-c102931f3c45b5a452c2").addClass("show");
$('div:not(#block-c102931f3c45b5a452c2)').removeClass('show');
    }
  );
 // Google
  $('.button-block a[href="#google"]').click(function(){
    $("#block-e71c8b0bee39e662e11f").addClass("show");
$('div:not(#block-e71c8b0bee39e662e11f)').removeClass('show');
    }
  );
});
</script>
<style>
#block-732e624b177ec3a83b6f, #block-a5fea4b81434f2b85321, #block-c102931f3c45b5a452c2, #block-e71c8b0bee39e662e11f {
  opacity: 0;
  transition: all 0.1s ease;
  }
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;
  }
</style>

#5. Explain some code