Demo: https://tuanphan-demo01.squarespace.com/click-button-show-code-block-v2?noredirect
Password: abc
Suppose you have 2 Buttons and 2 Code Blocks.
And you want: when clicking on the Button, Code Blocks will appear below it.
You can follow these steps:
#1. First, add 2 Button Blocks and 2 Code Blocks
#2. Edit 2 Button Blocks, and use these URLs:
- #code01
- #code02
and make sure the option “Open Link in New Tab” is disabled.
#3. Install Squarespace ID Finder to find the ID of all blocks.
In my example, we will have:
- Button 01: #block-yui_3_17_2_1_1711166958100_5619
- Button 02: #block-yui_3_17_2_1_1711166958100_6094
- Code Block 01: #block-yui_3_17_2_1_1711166958100_6550
- Code Block 02: #block-yui_3_17_2_1_1711166958100_6986
#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(){ // Code 01 $("#block-yui_3_17_2_1_1711166958100_6550").closest('.fe-block').addClass('code01 show'); // Code 02 $("#block-yui_3_17_2_1_1711166958100_6986").closest('.fe-block').addClass('code02'); // Code 01 $('a[href="#code01"]').click(function(){ $(".code01").addClass("show"); $('.fe-block:not(.code01)').removeClass('show'); } ); // Code 02 $('a[href="#code02"]').click(function(){ $(".code02").addClass("show"); $('.fe-block:not(.code02)').removeClass('show'); } ); }); </script> <style> .code01 .code-block, .code02 .code-block { display: none; } .show .code-block { display: block !important; } .show { z-index: 999999 !important; } </style>
#5. Explain code