Jump to content

[Share] Click Button - Show Image

Recommended Posts

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

Pass: abc

image.png.020ecd2f269ea51bd26379dfd96704c1.png

Suppose you have 6 buttons and 6 Images.

And you want: when clicking on the Button, Image will appear.

You can follow these steps:

If you can't make it work, you can comment with site url or message me, I can help easier.

#1. First, add 6 Button Blocks and 6 Image Blocks

image.png.d588da658e583ae079ab037dd6c5c2fb.png

#2. Edit 6 Button Blocks, and use these URLs:

  • #button01
  • #button02
  • #button03
  • #button04
  • #button05
  • #button06

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

image.png.e603c4a4c07d530937e437ced982a706.png

image.png.8533df73f8688d3630321373531d21a8.png

image.png.c9b7801d76a2d69771f023fe60a2d9d2.png

image.png.54fdbec763d4a2d3d5ac6b3e12eea542.png

image.png.3be2e9c4132e2b04b80eab4443fbf20b.png

image.png.aab1c6bb9da5d6e9b402caa9c6b4a432.png

#3. Install Squarespace ID Finder to find the ID of the Image

https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

In my example, we will have:

  • Image 01: #block-yui_3_17_2_1_1717474665476_10029
  • Image 02: #block-yui_3_17_2_1_1717474665476_10967
  • Image 03: #block-yui_3_17_2_1_1717474665476_11897
  • Image 04: #block-yui_3_17_2_1_1717474665476_10503
  • Image 05: #block-yui_3_17_2_1_1717474665476_11431
  • Image 06: #block-yui_3_17_2_1_1717474665476_12361

No need to find the ID of the Button

image.png.4f8c30772bc11801c9415e16aaa5c7cf.png

#4. Use this code to Page Header Code Injection (Page where you added Image Blocks/Button Blocks)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Button 01 
  $("#block-yui_3_17_2_1_1717474665476_10029").closest('.fe-block').addClass('button01 show');
  $('a[href="#button01"]').addClass('active-button');
  // Button 02
$("#block-yui_3_17_2_1_1717474665476_10967").closest('.fe-block').addClass('button02');
  // Button 03
$("#block-yui_3_17_2_1_1717474665476_11897").closest('.fe-block').addClass('button03');
  // Button 04
$("#block-yui_3_17_2_1_1717474665476_10503").closest('.fe-block').addClass('button04');
  // Button 05
$("#block-yui_3_17_2_1_1717474665476_11431").closest('.fe-block').addClass('button05');
  // Button 06
$("#block-yui_3_17_2_1_1717474665476_12361").closest('.fe-block').addClass('button06');
  
  // Button 01 
  $('a[href="#button01"]').click(function(){
    $(".button01").addClass("show");
    $('.fe-block:not(.button01)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#button01"])').removeClass('active-button');
    }
  );
// Button 02
 $('a[href="#button02"]').click(function(){
   $(".button02").addClass("show");
    $('.fe-block:not(.button02)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#button02"])').removeClass('active-button')
    }
  );
// Button 03
 $('a[href="#button03"]').click(function(){
   $(".button03").addClass("show");
    $('.fe-block:not(.button03)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#button03"])').removeClass('active-button')
    }
  );
// Button 04
 $('a[href="#button04"]').click(function(){
   $(".button04").addClass("show");
    $('.fe-block:not(.button04)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#button04"])').removeClass('active-button')
    }
  );
// Button 05
 $('a[href="#button05"]').click(function(){
   $(".button05").addClass("show");
    $('.fe-block:not(.button05)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#button05"])').removeClass('active-button')
    }
  );
// Button 06
 $('a[href="#button06"]').click(function(){
   $(".button06").addClass("show");
    $('.fe-block:not(.button06)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#button06"])').removeClass('active-button')
    }
  );
});
</script>
<style>
.button01 .image-block, .button02 .image-block, .button03 .image-block, .button04 .image-block, .button05 .image-block, .button06 .image-block {
    display: none;
}
  .button-block a {
  background-color: rgba(0,0,0,0.2) !important;
  }
  .show .image-block {
      display: block !important;
  }
  .show {
      z-index: 999999 !important;
  }
  .button-block a.active-button {
  background-color: rgba(0,0,0,1) !important;
  }
  .fe-block:has(.button-block) {
    position: relative;
    z-index: 9999999 !important;
}
</style>

image.png.49af946b39cc54d743179e952e7df38c.png

#5. Explain a bit

image.png.959fc64911146e5d4ab5814b0de3d85c.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Replies 0
  • Views 182
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.