Toggle Content Not Displaying Content

Site URL: https://kanaree.io/new-page-3

I have been following this post here and have seen multiple other users get it to work https://www.spacetutorials.com/toggle-button-for-content. I have grabbed a random block from the home page but the content never displays the block even thought all the CSS and JS look like it is working?  

Here is an example of how I set right now for the default block. I have tried a bunch of different ways of referencing the blocks but nothing makes it render? 

<script>
$('.button-left').ready(function() {
    $('#block-yui_3_17_2_1_1609025726286_281').show();

You mention following a thread but without the context of that thread I'm confused.

Could you share a link to the thread you mention or post this message as a follow up to that thread?

Sure here is a Squarespace forum post from a few years ago 

. It looks like it works there on desktop mobile needs work.  

Here is the original article I followed and could never get to work. Same one linked in the forum above.

https://www.spacetutorials.com/toggle-button-for-content 

Yeah I was confused on if I have to add the blocks to that page or if I can use any blocks on the site. Let me try adding two blocks and then referencing them. I tried that the first time and it did not work but maybe I had a reference wrong.  

Thank you Creedon that was it. Now I can start tweaking it. The blocks have to be on the same page it looks like. The actual transition is a little funky but might be able to work through that. Going to try with our pricing cards and see if I can get that to work.   

2 minutes ago, Kanaree said:

Goin got try with our pricing cards and see if I can get that to work. 

Hit us up again if you need help with tweaking.

@Kanaree Hi. I see this page on tablet doesn't look good. You can stacked them, or make text size smaller.

https://www.kanaree.io/product

/* Tablet pricing table */
@media screen and (max-width:900px) and (min-width:641px) {
/* plan name */
section#pricing-submod .image-title * {
    font-size: 20px;
}
}

Similar on pricing page

https://www.kanaree.io/pricing

and this page

https://www.kanaree.io/chrome-extension

/* chrome extension table */
@media screen and (max-width:900px) and (min-width:641px) {
/* table width */
div#page-5f6fb5f616ffd844a3be08b0 .span-4 {
    width: 50%;
}
/* remove blank column */
div#page-5f6fb5f616ffd844a3be08b0 .span-2 {
    display: none;
}
}