Click Image Blocks to Reveal Hidden Text Blocks

Site URL: https://brass-sphere-xyd7.squarespace.com/milestone-map

Site URL: https://brass-sphere-xyd7.squarespace.com/milestone-map

Password:  squarespace1

I have a page on my site with a series of 20 image blocks containing numbered gems. There are hover effects applied to the image blocks. But I am wondering if it is also possible to add a feature where when you click on one of the numbered gems, a different text block will reveal itself in the middle? I've attached a screenshot below. 

@tuanphan I see you did something similar for this user, where clicking on 4 different headlines revealed 4 different text boxes. I tried duplicating using my image blocks instead but I couldn't figure it out. I saw you asked the user to create the 4 text blocks. I created 20 text blocks that I would like to have all hidden, only to be revealed when their corresponding numbered gem is clicked. Is this possible? Thank you!

Hey @benjaminternational, this would require a piece of javascript to be written. I offer Custom Coding like this if you are interested - abibacon.com/custom-coding

You can use this approach

If you need an exact guide for your case, let me know, I can write a guide for you

@tuanphan I assigned each image with the appropriate #link and filled in the corresponding code into the footer, changing the # and block ID's for each of the 20. It didn't work. I am wondering if maybe it's because in the tutorial I followed, all three texts that were clicked to reveal more text were in the same block? And each of my images using to trigger the text are separate blocks?

Here's the code I have in the footer:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("#block-0b7a02dd2c85f175322c").addClass("show");
  // One
  $('.html-block a[href="#one"]').click(function(){
    $("#block-0b7a02dd2c85f175322c").addClass("show");
$('div:not(#block-0b7a02dd2c85f175322c)').removeClass('show');
    }
  );
   // Two
  $('.html-block a[href="#two"]').click(function(){
    $("#block-6f4b5e061432958cb0b6").addClass("show");
$('div:not(#block-6f4b5e061432958cb0b6)').removeClass('show');
    }
  );
  // Three
  $('.html-block a[href="#three"]').click(function(){
    $("#block-d3b4bbf7faca9ffce4f7").addClass("show");
$('div:not(#block-d3b4bbf7faca9ffce4f7)').removeClass('show');
    }
  );
   // Four
  $('.html-block a[href="#four"]').click(function(){
    $("#block-c0b09d04b6a3582346a8").addClass("show");
$('div:not(#block-c0b09d04b6a3582346a8)').removeClass('show');
    }
  );
  // Five
  $('.html-block a[href="#five"]').click(function(){
    $("#block-5271881fc2d21e6ae00c").addClass("show");
$('div:not(#block-5271881fc2d21e6ae00c)').removeClass('show');
    }
  );
   // Six
  $('.html-block a[href="#six"]').click(function(){
    $("#block-c7e44d4ff3efa537cb99").addClass("show");
$('div:not(#block-c7e44d4ff3efa537cb99)').removeClass('show');
    }
  );
  // Seven
  $('.html-block a[href="#seven"]').click(function(){
    $("#block-0d7423fe1daaab31936a").addClass("show");
$('div:not(#block-0d7423fe1daaab31936a)').removeClass('show');
    }
  );
   // Eight
  $('.html-block a[href="#eight"]').click(function(){
    $("#block-24d2c726d7d2ad97d825").addClass("show");
$('div:not(#block-24d2c726d7d2ad97d825)').removeClass('show');
    }
  );  
    // Nine
  $('.html-block a[href="#nine"]').click(function(){
    $("#block-56df435772c9325b22a0").addClass("show");
$('div:not(#block-56df435772c9325b22a0)').removeClass('show');
    }
  );
   // Ten
  $('.html-block a[href="#ten"]').click(function(){
    $("#block-860fc5bcbead12e0f5ab").addClass("show");
$('div:not(#block-860fc5bcbead12e0f5ab)').removeClass('show');
    }
  );
  // Eleven
  $('.html-block a[href="#eleven"]').click(function(){
    $("#block-b51e033a74c3216782f7").addClass("show");
$('div:not(#block-b51e033a74c3216782f7)').removeClass('show');
    }
  );
   // Twelve
  $('.html-block a[href="#twelve"]').click(function(){
    $("#block-96e63a3f052729fe6f29").addClass("show");
$('div:not(#block-96e63a3f052729fe6f29)').removeClass('show');
    }
  );
  // Thirteen
  $('.html-block a[href="#thirteen"]').click(function(){
    $("#block-fb133884d63f0b03e172").addClass("show");
$('div:not(#block-fb133884d63f0b03e172)').removeClass('show');
    }
  );
   // Fourteen
  $('.html-block a[href="#fourteen"]').click(function(){
    $("#block-057f810f3a451851694d").addClass("show");
$('div:not(#block-057f810f3a451851694d)').removeClass('show');
    }
  );
  // Fifteen
  $('.html-block a[href="#fifteen"]').click(function(){
    $("#block-6dcf57ee364cca147d9d").addClass("show");
$('div:not(#block-6dcf57ee364cca147d9d)').removeClass('show');
    }
  );
   // Sixteen
  $('.html-block a[href="#sixteen"]').click(function(){
    $("#block-5d7b73f4d74d86d6dccc").addClass("show");
$('div:not(#block-5d7b73f4d74d86d6dccc)').removeClass('show');
    }
  );  
  // Seventeen
  $('.html-block a[href="#seventeen"]').click(function(){
    $("#block-0a3a6f11d4961ffdcd84").addClass("show");
$('div:not(#block-0a3a6f11d4961ffdcd84)').removeClass('show');
    }
  );
   // Eighteen
  $('.html-block a[href="#eighteen"]').click(function(){
    $("#block-858a16f05c26e1f08aed").addClass("show");
$('div:not(#block-858a16f05c26e1f08aed)').removeClass('show');
    }
  );
  // Nineteen
  $('.html-block a[href="#nineteen"]').click(function(){
    $("#block-74acbaff8d58b5939dbf").addClass("show");
$('div:not(#block-74acbaff8d58b5939dbf)').removeClass('show');
    }
  );
   // Twenty
  $('.html-block a[href="#twenty"]').click(function(){
    $("#block-cd598cd8b64cfa51aeae").addClass("show");
$('div:not(#block-cd598cd8b64cfa51aeae)').removeClass('show');
    }
  );    
});
</script>
<style>
#block-0b7a02dd2c85f175322c, #block-6f4b5e061432958cb0b6, #block-d3b4bbf7faca9ffce4f7, #block-c0b09d04b6a3582346a8, #block-5271881fc2d21e6ae00c, #block-c7e44d4ff3efa537cb99, #block-0d7423fe1daaab31936a, #block-24d2c726d7d2ad97d825, #block-56df435772c9325b22a0, #block-860fc5bcbead12e0f5ab, #block-b51e033a74c3216782f7, #block-96e63a3f052729fe6f29, #block-fb133884d63f0b03e172, #block-057f810f3a451851694d, #block-6dcf57ee364cca147d9d, #block-5d7b73f4d74d86d6dccc, #block-0a3a6f11d4961ffdcd84, #block-858a16f05c26e1f08aed, #block-74acbaff8d58b5939dbf, #block-cd598cd8b64cfa51aeae. {
  opacity: 0;
  transition: all 0.1s ease;
  }
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;
  }
</style>

On 10/18/2024 at 9:33 AM, benjaminternational said:

@tuanphan I assigned each image with the appropriate #link and filled in the corresponding code into the footer, changing the # and block ID's for each of the 20. It didn't work. I am wondering if maybe it's because in the tutorial I followed, all three texts that were clicked to reveal more text were in the same block? And each of my images using to trigger the text are separate blocks?

Here's the code I have in the footer:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("#block-0b7a02dd2c85f175322c").addClass("show");
  // One
  $('.html-block a[href="#one"]').click(function(){
    $("#block-0b7a02dd2c85f175322c").addClass("show");
$('div:not(#block-0b7a02dd2c85f175322c)').removeClass('show');
    }
  );
   // Two
  $('.html-block a[href="#two"]').click(function(){
    $("#block-6f4b5e061432958cb0b6").addClass("show");
$('div:not(#block-6f4b5e061432958cb0b6)').removeClass('show');
    }
  );
  // Three
  $('.html-block a[href="#three"]').click(function(){
    $("#block-d3b4bbf7faca9ffce4f7").addClass("show");
$('div:not(#block-d3b4bbf7faca9ffce4f7)').removeClass('show');
    }
  );
   // Four
  $('.html-block a[href="#four"]').click(function(){
    $("#block-c0b09d04b6a3582346a8").addClass("show");
$('div:not(#block-c0b09d04b6a3582346a8)').removeClass('show');
    }
  );
  // Five
  $('.html-block a[href="#five"]').click(function(){
    $("#block-5271881fc2d21e6ae00c").addClass("show");
$('div:not(#block-5271881fc2d21e6ae00c)').removeClass('show');
    }
  );
   // Six
  $('.html-block a[href="#six"]').click(function(){
    $("#block-c7e44d4ff3efa537cb99").addClass("show");
$('div:not(#block-c7e44d4ff3efa537cb99)').removeClass('show');
    }
  );
  // Seven
  $('.html-block a[href="#seven"]').click(function(){
    $("#block-0d7423fe1daaab31936a").addClass("show");
$('div:not(#block-0d7423fe1daaab31936a)').removeClass('show');
    }
  );
   // Eight
  $('.html-block a[href="#eight"]').click(function(){
    $("#block-24d2c726d7d2ad97d825").addClass("show");
$('div:not(#block-24d2c726d7d2ad97d825)').removeClass('show');
    }
  );  
    // Nine
  $('.html-block a[href="#nine"]').click(function(){
    $("#block-56df435772c9325b22a0").addClass("show");
$('div:not(#block-56df435772c9325b22a0)').removeClass('show');
    }
  );
   // Ten
  $('.html-block a[href="#ten"]').click(function(){
    $("#block-860fc5bcbead12e0f5ab").addClass("show");
$('div:not(#block-860fc5bcbead12e0f5ab)').removeClass('show');
    }
  );
  // Eleven
  $('.html-block a[href="#eleven"]').click(function(){
    $("#block-b51e033a74c3216782f7").addClass("show");
$('div:not(#block-b51e033a74c3216782f7)').removeClass('show');
    }
  );
   // Twelve
  $('.html-block a[href="#twelve"]').click(function(){
    $("#block-96e63a3f052729fe6f29").addClass("show");
$('div:not(#block-96e63a3f052729fe6f29)').removeClass('show');
    }
  );
  // Thirteen
  $('.html-block a[href="#thirteen"]').click(function(){
    $("#block-fb133884d63f0b03e172").addClass("show");
$('div:not(#block-fb133884d63f0b03e172)').removeClass('show');
    }
  );
   // Fourteen
  $('.html-block a[href="#fourteen"]').click(function(){
    $("#block-057f810f3a451851694d").addClass("show");
$('div:not(#block-057f810f3a451851694d)').removeClass('show');
    }
  );
  // Fifteen
  $('.html-block a[href="#fifteen"]').click(function(){
    $("#block-6dcf57ee364cca147d9d").addClass("show");
$('div:not(#block-6dcf57ee364cca147d9d)').removeClass('show');
    }
  );
   // Sixteen
  $('.html-block a[href="#sixteen"]').click(function(){
    $("#block-5d7b73f4d74d86d6dccc").addClass("show");
$('div:not(#block-5d7b73f4d74d86d6dccc)').removeClass('show');
    }
  );  
  // Seventeen
  $('.html-block a[href="#seventeen"]').click(function(){
    $("#block-0a3a6f11d4961ffdcd84").addClass("show");
$('div:not(#block-0a3a6f11d4961ffdcd84)').removeClass('show');
    }
  );
   // Eighteen
  $('.html-block a[href="#eighteen"]').click(function(){
    $("#block-858a16f05c26e1f08aed").addClass("show");
$('div:not(#block-858a16f05c26e1f08aed)').removeClass('show');
    }
  );
  // Nineteen
  $('.html-block a[href="#nineteen"]').click(function(){
    $("#block-74acbaff8d58b5939dbf").addClass("show");
$('div:not(#block-74acbaff8d58b5939dbf)').removeClass('show');
    }
  );
   // Twenty
  $('.html-block a[href="#twenty"]').click(function(){
    $("#block-cd598cd8b64cfa51aeae").addClass("show");
$('div:not(#block-cd598cd8b64cfa51aeae)').removeClass('show');
    }
  );    
});
</script>
<style>
#block-0b7a02dd2c85f175322c, #block-6f4b5e061432958cb0b6, #block-d3b4bbf7faca9ffce4f7, #block-c0b09d04b6a3582346a8, #block-5271881fc2d21e6ae00c, #block-c7e44d4ff3efa537cb99, #block-0d7423fe1daaab31936a, #block-24d2c726d7d2ad97d825, #block-56df435772c9325b22a0, #block-860fc5bcbead12e0f5ab, #block-b51e033a74c3216782f7, #block-96e63a3f052729fe6f29, #block-fb133884d63f0b03e172, #block-057f810f3a451851694d, #block-6dcf57ee364cca147d9d, #block-5d7b73f4d74d86d6dccc, #block-0a3a6f11d4961ffdcd84, #block-858a16f05c26e1f08aed, #block-74acbaff8d58b5939dbf, #block-cd598cd8b64cfa51aeae. {
  opacity: 0;
  transition: all 0.1s ease;
  }
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;
  }
</style>

In your case, you will need to change

.html-block

to

.image-block

so the code will be like this

 $('.image-block a[href="#one"]').click(function(){

Next, remove this dot symbol