Trying to Get Buttons to Change Video Without Loading New Page

Im brand new to Squarespace and I'm currently trying to figure out how can I make it so that when a user clicks the buttons on the left it only changes what appears in the video section on the right?

For instance they click the "Reel" button and my reel video appears to the right, they click "About" and a block of text appears in its place, they click "Resume" and the text of my resume shows up, etc. Whats seen here is a template I modified and removed a lot of the extras I didn't need.

I want it so that there are no other pages to navigate to or load. Everything can be seen on a single page

Hi,

I wrote a guide to achieve this, you can follow it.

In my guide, I used Image Blocks on Left, but you can use Button, both are similar, just replace with corresponding block ID.

I also use Hover, instead of Click, you can consider.

9 hours ago, tuanphan said:

Hi,

I wrote a guide to achieve this, you can follow it.

In my guide, I used Image Blocks on Left, but you can use Button, both are similar, just replace with corresponding block ID.

I also use Hover, instead of Click, you can consider.

 

This is close to what im thinking. If I use the "click" method instead will that make it so that when the cursor leaves the corresponding logo/text it wont disappear like in the demo?

16 hours ago, _KW_ said:

This is close to what im thinking. If I use the "click" method instead will that make it so that when the cursor leaves the corresponding logo/text it wont disappear like in the demo?

I wrote click here, you try checking

On 3/8/2024 at 3:53 AM, tuanphan said:

I wrote click here, you try checking

 

That does appear to be what im going for, but I cant go any further.

I dont have a subscription plan that allows for code injection. I'm locked out of it and I'd rather not pay for a pricier plan just to do that. Is there a work around or another way of doing this same effect?

Also the Squarespace ID Finder doesnt seem to be working. I'm using FireFox, but the same extension is available there. Its installed and active, but nothing happened.

5 hours ago, _KW_ said:

That does appear to be what im going for, but I cant go any further.

I dont have a subscription plan that allows for code injection. I'm locked out of it and I'd rather not pay for a pricier plan just to do that. Is there a work around or another way of doing this same effect?

Also the Squarespace ID Finder doesnt seem to be working. I'm using FireFox, but the same extension is available there. Its installed and active, but nothing happened.

#1. You can try extension in Chrome

#2. Instead adding code to Code Injection, you can also edit Site Footer > Add a Markdown Block > Paste same code

Jumping into the thread as I have a related question. 

Hi @tuanphan, thank you for providing this information, super helpful to see how this functionality can work! 

I have a website: https://flamingo-avocado-g26w.squarespace.com/ (pass: abc) and I'm trying to show 3 images and text box (home insurance, landlord insurance, condo insurance) whenever someone clicks the "personal" button at the top of the homepage. Then, when someone clicks the "business" button, I want to show three different images and associated text (flood insurance, boat insurance, auto insurance) which I've been able to do. However, the hyperlinks that I added to the business images no longer work. I'm wondering is it's because the personal images are overlaid (but hidden) and that's causing the issue. 

Do you know of a solution here? I'm trying to replicate the functionality you see on this website: https://www.worthinsurance.com/

Thank you!

On 3/14/2024 at 4:00 AM, McGibsoon said:

Jumping into the thread as I have a related question. 

Hi @tuanphan, thank you for providing this information, super helpful to see how this functionality can work! 

I have a website: https://flamingo-avocado-g26w.squarespace.com/ (pass: abc) and I'm trying to show 3 images and text box (home insurance, landlord insurance, condo insurance) whenever someone clicks the "personal" button at the top of the homepage. Then, when someone clicks the "business" button, I want to show three different images and associated text (flood insurance, boat insurance, auto insurance) which I've been able to do. However, the hyperlinks that I added to the business images no longer work. I'm wondering is it's because the personal images are overlaid (but hidden) and that's causing the issue. 

Do you know of a solution here? I'm trying to replicate the functionality you see on this website: https://www.worthinsurance.com/

Thank you!

Which links you added to Business Images? I tried hover on 3 images, and all are clickable

On 3/13/2024 at 3:47 AM, tuanphan said:

#1. You can try extension in Chrome

#2. Instead adding code to Code Injection, you can also edit Site Footer > Add a Markdown Block > Paste same code

Apologies for taking so long to reply, but I think I made some progress but I cant really tell. Putting the code into Markdown and changing the id's and "#links" for the buttons to what im using seemed to do something briefly but when I preview the page and start clicking buttons nothing happens. I see the URL at the top change to #reel when I click the "Reel" button but nothing on the page itself changes.

Here is the code I have in the markdown block. Am I missing anything?
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Reel
  $('.button-block a[href="#reel"]').click(function(){
    $("#block-4247f19621f2ce6bbb76").addClass("show");
$('div:not(#block-4247f19621f2ce6bbb76)').removeClass('show');
    }
  );
// Short Film 
 $('.button-block a[href="#short"]').click(function(){
    $("#block-49d59487b7438920f05c").addClass("show");
$('div:not(#block-49d59487b7438920f05c)').removeClass('show');
    }
  );
  // About
   $('.button-block a[href="#about"]').click(function(){
    $("#block-yui_3_17_2_1_1709842666925_3165").addClass("show");
$('div:not(#block-yui_3_17_2_1_1709842666925_3165)').removeClass('show');
    }
  );
 });
</script>
<style>
#block-4247f19621f2ce6bbb76, #block-49d59487b7438920f05c, #block-yui_3_17_2_1_1709842666925_3165,{
  opacity: 0;
  transition: all 0.1s ease;
  }
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;
  }
</style>

On 3/18/2024 at 7:50 AM, _KW_ said:

Apologies for taking so long to reply, but I think I made some progress but I cant really tell. Putting the code into Markdown and changing the id's and "#links" for the buttons to what im using seemed to do something briefly but when I preview the page and start clicking buttons nothing happens. I see the URL at the top change to #reel when I click the "Reel" button but nothing on the page itself changes.

Here is the code I have in the markdown block. Am I missing anything?
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Reel
  $('.button-block a[href="#reel"]').click(function(){
    $("#block-4247f19621f2ce6bbb76").addClass("show");
$('div:not(#block-4247f19621f2ce6bbb76)').removeClass('show');
    }
  );
// Short Film 
 $('.button-block a[href="#short"]').click(function(){
    $("#block-49d59487b7438920f05c").addClass("show");
$('div:not(#block-49d59487b7438920f05c)').removeClass('show');
    }
  );
  // About
   $('.button-block a[href="#about"]').click(function(){
    $("#block-yui_3_17_2_1_1709842666925_3165").addClass("show");
$('div:not(#block-yui_3_17_2_1_1709842666925_3165)').removeClass('show');
    }
  );
 });
</script>
<style>
#block-4247f19621f2ce6bbb76, #block-49d59487b7438920f05c, #block-yui_3_17_2_1_1709842666925_3165,{
  opacity: 0;
  transition: all 0.1s ease;
  }
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;
  }
</style>

 

Can you share link to page? I can check easier

6 hours ago, tuanphan said:

Can you share link to page? I can check easier

I'll send you a DM. Do I just send you the link for the "preview" tab? The site itself isnt public yet.

On 3/20/2024 at 5:01 AM, _KW_ said:

I'll send you a DM. Do I just send you the link for the "preview" tab? The site itself isnt public yet.

You can follow this guide