Buy me a coffee

Hover text – Show more text on right

Demo: https://tuanphan3.squarespace.com/hover-text-show-more-text?noredirect
Pass: abc

Suppose you have 5 texts: Apple, Microsoft, Facebook, Instagram, and Google.
You want: when users hover on each text > show more text on the right side, something like this.

 

Hover Text Show More Text On Right 01 Min

#1. First, add a Text Block with 5 Paragraph, then add these URLs

  • Apple – #apple
  • Microsoft – #microsoft
  • Facebook – #facebook
  • Instagram – #instagram
  • Google – #google

and make sure “Open Link in new tab” is DISABLED.
(if you want to remove the Link Underline, I will provide the code in step #4)

Hover Text Show More Text On Right 02 Min

Hover Text Show More Text On Right 03 Min

Hover Text Show More Text On Right 06 Min

Hover Text Show More Text On Right 07 Min

Hover Text Show More Text On Right 06 Min

#2. Add 5 Text Blocks on the right side (You can drag them to make them overlap together then, or keep the current position if you want).

Hover Text Show More Text On Right 02 Min

#3. Install Squarespace ID Finder tool (Free)

Hover Text Show More Text On Right 08 Min
Then, you can find the ID of the Left Text Block and 5 Text Blocks on the right with the tool. In this example, we will have:

  • Left text block: #block-yui_3_17_2_1_1709172012907_24110
  • Apple: #block-yui_3_17_2_1_1709172012907_25285
  • Microsoft: #block-yui_3_17_2_1_1709172012907_26049
  • Facebook: #block-yui_3_17_2_1_1709172012907_27013
  • Instagram: #block-yui_3_17_2_1_1709172012907_28082
  • Google: div#block-yui_3_17_2_1_1709172012907_29250

Hover Text Show More Text On Right 03 Min

#4. Use this code to Code Injection – Footer or Page Header Code Injection (the page where you added 6 Text Blocks)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Apple
  $('#block-yui_3_17_2_1_1709172012907_24110 a[href="#apple"]').hover(function(){
    $("#block-yui_3_17_2_1_1709172012907_25285").addClass("show");
    }, function(){
    $('#block-yui_3_17_2_1_1709172012907_25285').removeClass("show");
    }
  );
// Microsoft
 $('#block-yui_3_17_2_1_1709172012907_24110 a[href="#microsoft"]').hover(function(){
    $("#block-yui_3_17_2_1_1709172012907_26049").addClass("show");
    }, function(){
    $('#block-yui_3_17_2_1_1709172012907_26049').removeClass("show");
    }
  );
  // Facebook 
   $('#block-yui_3_17_2_1_1709172012907_24110 a[href="#facebook"]').hover(function(){
    $("#block-yui_3_17_2_1_1709172012907_27013").addClass("show");
    }, function(){
    $('#block-yui_3_17_2_1_1709172012907_27013').removeClass("show");
    }
  );
// Instagram
  $('#block-yui_3_17_2_1_1709172012907_24110 a[href="#instagram"]').hover(function(){
    $("#block-yui_3_17_2_1_1709172012907_28082").addClass("show");
    }, function(){
    $('#block-yui_3_17_2_1_1709172012907_28082').removeClass("show");
    }
  );
 // Google
  $('#block-yui_3_17_2_1_1709172012907_24110 a[href="#google"]').hover(function(){
    $("div#block-yui_3_17_2_1_1709172012907_29250").addClass("show");
    }, function(){
    $('div#block-yui_3_17_2_1_1709172012907_29250').removeClass("show");
    }
  );
});
</script>
<style>
#block-yui_3_17_2_1_1709172012907_25285, #block-yui_3_17_2_1_1709172012907_26049, #block-yui_3_17_2_1_1709172012907_27013, #block-yui_3_17_2_1_1709172012907_28082, div#block-yui_3_17_2_1_1709172012907_29250  {
  opacity: 0;
  transition: all 0.1s ease;
  }
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;
  }
div#block-yui_3_17_2_1_1709172012907_24110 a {
    text-decoration: none !important;
    color: #000;
}
</style>

Hover Text Show More Text On Right 04 Min

#5. Explain

Hover Text Show More Text On Right 05 Min