Buy me a coffee

Click text – Show text

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

Password: abc

Suppose you have 3 texts on the left and 3 other texts on the right

And you want: when clicking on the Text, another Text will appear.

You can follow these steps:

#1. First, add 3 Text Blocks on the left and 3 Text Blocks on the right

Click Text Show Text 04 Min

#2. Highlight each Text Block, and add these URLs:

  • #apple
  • #google
  • #microsoft

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

Click Text Show Text 01 Min

Click Text Show Text 02 Min

Click Text Show Text 03 Min

#3. Install Squarespace ID Finder to find the ID of Buttons and Newsletters.

In my example, we will have:

Left Text Block: #block-yui_3_17_2_1_1710206108509_16699

Right Text Block:

  • Apple’s text: #block-yui_3_17_2_1_1710206108509_21449
  • Google’s text: #block-yui_3_17_2_1_1710206108509_22215
  • Microsoft’s text: #block-yui_3_17_2_1_1710206108509_23881

Click Text Show Text 05 Min

#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
  $('.html-block a[href="#apple"]').click(function(){
    $("#block-yui_3_17_2_1_1710206108509_21449").addClass("show");
$('div:not(#block-yui_3_17_2_1_1710206108509_21449)').removeClass('show');
    }
  );
// Google
 $('.html-block a[href="#google"]').click(function(){
    $("#block-yui_3_17_2_1_1710206108509_22215").addClass("show");
$('div:not(#block-yui_3_17_2_1_1710206108509_22215)').removeClass('show');
    }
  );
  // Microsoft 
   $('.html-block a[href="#microsoft"]').click(function(){
    $("#block-yui_3_17_2_1_1710206108509_23881").addClass("show");
$('div:not(#block-yui_3_17_2_1_1710206108509_23881)').removeClass('show');
    }
  );
});
</script>
<style>
#block-yui_3_17_2_1_1710206108509_21449, #block-yui_3_17_2_1_1710206108509_22215, #block-yui_3_17_2_1_1710206108509_23881 {
  opacity: 0;
  transition: all 0.1s ease;
  }
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;
  }
</style>

Click Text Show Text 06 Min

#5. Explain code

Click Text Show Text 07 Min