Split Screen — Link on 1 side, Image on other

Specific Page Code Injection

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous">
</script>

Code Block 1 — The list of links

<h2 style="font-size: 45px" align="right">
  Vancouver, Canada
</h2>

<div class="tab-button-group">
  <h2 class="tab-button" id="revolver-tab">Revolver</h2>
  <h2 class="tab-button" id="nemesis-tab">Nemesis</h2>
  <h2 class="tab-button" id="prototype-tab">Prototype</h2>
</div>

Code Block 2

<script>
  $(function(){
    let vancouverTab = '#block-yui_3_17_2_1_1621022615146_13861';
    let revolverTab = '#block-yui_3_17_2_1_1620868266104_21678';
    let nemesisTab = '#block-yui_3_17_2_1_1620868266104_35654';
    let prototypeTab = '#block-yui_3_17_2_1_1620874361092_4593';
    let modusTab = '#block-yui_3_17_2_1_1620875804400_4555';
    let ikTab = '#block-yui_3_17_2_1_1620877529556_5383';
    let timbertrainTab = '#block-yui_3_17_2_1_1620879108511_6270';
    let elysianTab = '#block-yui_3_17_2_1_1620882075898_7237';
    let theirthereTab = '#block-yui_3_17_2_1_1620883404662_8118';
    let harkenTab = '#block-yui_3_17_2_1_1620933474951_8960';
    let barrioTab = '#block-yui_3_17_2_1_1620935708280_9801';
    let birdsbeetsTab = '#block-yui_3_17_2_1_1620936699833_10643';
    
    let vancouverTabButton = '#vancouver-tab';
    let revolverTabButton = '#revolver-tab';
    let nemesisTabButton = '#nemesis-tab';
    let prototypeTabButton = '#prototype-tab';
    let modusTabButton = '#modus-tab';
    let ikTabButton = '#ik-tab';
    let timbertrainTabButton = '#timbertrain-tab';
    let elysianTabButton = '#elysian-tab';
    let theirthereTabButton = '#theirthere-tab';
    let harkenTabButton = '#harken-tab';
    let barrioTabButton = '#barrio-tab';
    let birdsbeetsTabButton = '#birdsbeets-tab';
    
    
    /*Initiate the Tabs*/   $(revolverTab).add(nemesisTab).add(prototypeTab).add(modusTab).add(ikTab).add(timbertrainTab).add(elysianTab).add(theirthereTab).add(harkenTab).add(barrioTab).add(birdsbeetsTab).addClass('non-active-tab');
    $(vancouverTab).addClass('active-tab');
    $(vancouverTabButton).addClass('active-tab-button');
    
    /*Add Actions to Each Button*/    
    $(revolverTabButton).click(function(){
      $(revolverTab).addClass('active-tab').removeClass('non-active-tab');
      $(nemesisTab).add(prototypeTab).add(vancouverTab).addClass('non-active-tab').removeClass('active-tab');
      $(revolverTabButton).addClass('active-tab-button');
      $(nemesisTabButton).add(prototypeTabButton).add(vancouverTabButton).removeClass('active-tab-button');
      window.Squarespace.initializeLayoutBlocks(Y);
    });

    $(nemesisTabButton).click(function(){
      $(nemesisTab).addClass('active-tab').removeClass('non-active-tab');
      $(revolverTab).add(prototypeTab).add(vancouverTab).addClass('non-active-tab').removeClass('active-tab');
      $(nemesisTabButton).addClass('active-tab-button');
      $(revolverTabButton).add(prototypeTabButton).add(vancouverTabButton).removeClass('active-tab-button');
      window.Squarespace.initializeLayoutBlocks(Y);
    });
    
     $(prototypeTabButton).click(function(){
      $(prototypeTab).addClass('active-tab').removeClass('non-active-tab');
      $(nemesisTab).add(revolverTab).add(vancouverTab).addClass('non-active-tab').removeClass('active-tab');
      $(prototypeTabButton).addClass('active-tab-button');
      $(nemesisTabButton).add(revolverTabButton).add(vancouverTabButton).removeClass('active-tab-button');
      window.Squarespace.initializeLayoutBlocks(Y);
    });
    
  });
</script>

Style the layout (split) — Custom CSS

/* style the layout **/
.active-tab {
   display:block;
}
.non-active-tab{
   display:none;
} 

.tab-button-group {
  float: right;
  width: 20%;
  height: 0px;  
}

.tab-button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 0px 0px;
  width: 100%;
  border: none;
  outline: none;
  text-align: right;
  cursor: pointer;
  transition: 0.3s;
  line-height: .5em;
}

.tab-button:hover {
  background-color: #cf9741;
  
}

.tab-button.active-tab-button {
  font-style: italic;
  background-color:#b8c8bf;
}

a {
  border: none!important;
}

.sqs-block-summary-v2 {
  float: left;
  padding: 0px 0px;
  width: 60%;
  margin-top: -10%;
}

Style the links / tabs — Custom CSS

/* Style the tab */
.tab {
  float: Right;
  border: 0px solid #F7F7F4;
  background-color: #F7F7F4;
  width: 30%;
  height: 500px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #F7F7F4;
}

/* Create an active/current "tab button" class */
.tab button.active {
  border-bottom: 2px solid #000000;
  margin-bottom: 20px;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 0px solid #F7F7F4;
  width: 70%;
  border-left: none;
  height: 900px;
}