Hover button – Show different form (v2)

Demo: https://tuanphan-demo01.squarespace.com/hover-button-show-different-form-v2?noredirect

Password: abc

Suppose you have 3 Button Blocks (left) – 3 Form Blocks (right).

When hovering over each button, will show the corresponding form on the right.

You can follow these steps:

#1. First, add 3 Button Blocks and 3 Form Blocks

#2. Edit 3 Button Blocks, and use these URLs

#apple
#microsoft
#facebook

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

#3. Install Squarespace ID Finder to find the ID of Form Block

In my example, we will have:

Apple Form: #block-a980deada2e05c803b74
Microsoft Form: #block-0fe620056daf337828f1
Facebook Form: #block-4c8a6f0e2c8dab30bd93

#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(){
  // Apple 
  $("#block-a980deada2e05c803b74").closest('.fe-block').addClass('apple show');
  $('a[href="#apple"]').addClass('active-button');
  // Microsoft
$("#block-0fe620056daf337828f1").closest('.fe-block').addClass('microsoft');
  // Facebook
$("#block-4c8a6f0e2c8dab30bd93").closest('.fe-block').addClass('facebook');
  
  // Apple 
  $('a[href="#apple"]').hover(function(){
    $(".apple").addClass("show");
    $('.fe-block:not(.apple)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#apple"])').removeClass('active-button');
    }
  );
// Microsoft
 $('a[href="#microsoft"]').hover(function(){
   $(".microsoft").addClass("show");
    $('.fe-block:not(.microsoft)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#microsoft"])').removeClass('active-button')
    }
  );
// Facebook
 $('a[href="#facebook"]').hover(function(){
   $(".facebook").addClass("show");
    $('.fe-block:not(.facebook)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#facebook"])').removeClass('active-button')
    }
  );
});
</script>
<style>
.apple .form-block, .microsoft .form-block, .facebook .form-block {
    display: none;
}
  .show .form-block {
      display: block !important;
  }
  .show {
      z-index: 999999 !important;
  }
  .active-button {
  background-color: green !important;
  }
</style>

#5. Explain code

Ask me a question, free