Show / Hide Contents in A Section If I click a Button

In the Squarespace 7.1 version, if I click a button in a section I want to show or see its hidden contents in that section too:

How to hide content and show it when  a button is clicked (example: testimonials (parent testimonial vs professional buttons)

 Like this in this site: https://www.onlinejobs.ph/real-results

Here is a quick guide to achieve: Click button - Show hidden section under it.

#1. First, you add a button >> Enter this URL

#load-more

Make sure “Open link in New Tab” is disabled

#2. Add a Section under Button. Install this free tool to find ID of section

In my example, we will have ID: 

section[data-section-id="6622374a4dccb83613051b22"]

#3. Use this code to Code Injection > FOOTER (or Page Header Injection, page where you use Button/Section)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){  
  // Load More
  $('a[href="#load-more"]').click(function(){
    $(this).remove();
    $('section[data-section-id="6622374a4dccb83613051b22"]').addClass("show");
    $('section:not([data-section-id="6622374a4dccb83613051b22"])').removeClass('show');
    }
  );
});
</script>
<style>
section[data-section-id="6622374a4dccb83613051b22"] {
    display: none;
  transition: all 0.5s;
}
  section.show {
      display: block !important;
    transition: all 0.5s;
  }
</style>

On 7/16/2024 at 10:12 PM, mggandes said:

In the Squarespace 7.1 version, if I click a button in a section I want to show or see its hidden contents in that section too:

How to hide content and show it when  a button is clicked (example: testimonials (parent testimonial vs professional buttons)

 Like this in this site: https://www.onlinejobs.ph/real-results

Thank you! I got it but whenever I clicked the buttons, they disappeared and showed the same content even if I copied and changed the ID code in  Code Injection of the other button.

These are the buttons that look like (1st photo):

When I click one of them, it looks like this (2nd photo), the button disappears and the content that appears is for the "Parents" button:

1 hour ago, mggandes said:

Thank you! I got it but whenever I clicked the buttons, they disappeared and showed the same content even if I copied and changed the ID code in  Code Injection of the other button.

 

These are the buttons that look like (1st photo):

 

 

 

When I click one of them, it looks like this (2nd photo), the button disappears and the content that appears is for the "Parents" button:

 

The idea that came to my mind is having 2 button elements and 2 below sections (hidden in default).

Using JavaScript to hide the right section. It is noticed that javascript is only available in business plan (or above)

Thank you! Can you guide me using Javascript?

On 7/19/2024 at 10:02 PM, mggandes said:

Thank you! I got it but whenever I clicked the buttons, they disappeared and showed the same content even if I copied and changed the ID code in  Code Injection of the other button.

 

These are the buttons that look like (1st photo):

 

 

 

When I click one of them, it looks like this (2nd photo), the button disappears and the content that appears is for the "Parents" button:

 

@tuanphan

5 minutes ago, mggandes said:

Thank you! Can you guide me using Javascript?

You can follow the solution @tuanphan gave above. If it does not return the result as you expect, share your URL here so we can check it more easily

Here's the link: https://memorystrategy.squarespace.com/real-results-2

I really appreciate any help you can provide.

I only see just one section below the button section. 

I describe the following concept to make sure that it  meets your requirement:

1. By default, it should show a section below these buttons and one button is active, right? (The active button can be set up with another color/ less transparent...

2. when we click on the next button > hide the default section and show another section

3. clicking the button will show the appropriate section

21 hours ago, HoaLT said:

I only see just one section below the button section. 

I describe the following concept to make sure that it  meets your requirement:

1. By default, it should show a section below these buttons and one button is active, right? (The active button can be set up with another color/ less transparent...

2. when we click on the next button > hide the default section and show another section

3. clicking the button will show the appropriate section

Hello! That is what it looked like when I followed @tuanphan 's suggestion that is why you only see just one section (buttons) 

You got it (see my side notes in bold and capitalized for each number below):

1. By default, it should show a section below these buttons and one button is active, right? (The active button can be set up with another color/ less transparent...

Yes, by default it should show a section (we want both buttons to remain the same color)

2. when we click on the next button > hide the default section and show another section

Correct but the other button (button of the default section) must still be visible so that when someone clicks it, they will  go back to the default section

3. clicking the button will show the appropriate section

Correct.

Thank you

On 7/25/2024 at 8:45 PM, mggandes said:

Hello! That is what it looked like when I followed @tuanphan 's suggestion that is why you only see just one section (buttons) 

You got it (see my side notes in bold and capitalized for each number below):

1. By default, it should show a section below these buttons and one button is active, right? (The active button can be set up with another color/ less transparent...

Yes, by default it should show a section (we want both buttons to remain the same color)

2. when we click on the next button > hide the default section and show another section

Correct but the other button (button of the default section) must still be visible so that when someone clicks it, they will  go back to the default section

3. clicking the button will show the appropriate section

Correct.

 

Thank you

My approach for 1 button only. With 2 or more buttons, follow this new guide

Thank you @tuanphan. But the code didn't work. 

Here's the link page where I used the code:

https://memorystrategy.squarespace.com/config/pages/website-tools/code-injection

Thanks as always 🙂

21 hours ago, mggandes said:

Thank you @tuanphan. But the code didn't work. 

Here's the link page where I used the code:

https://memorystrategy.squarespace.com/config/pages/website-tools/code-injection

 

Thanks as always 🙂

/config is url in edit mode, we can't access it.

You can click Arrow on top right of page >> it should show real url in browser address bar

Sorry about that.

Here's the link:

https://memorystrategy.squarespace.com/

I checked that the jquery script is added but I can not see the code block on this page. Have you added it yet?

On 8/10/2024 at 4:36 PM, tuanphan said:

/config is url in edit mode, we can't access it.

You can click Arrow on top right of page >> it should show real url in browser address bar

@tuanphan 

Sorry about that.

Here's the link:

https://memorystrategy.squarespace.com/

Thank you

On 8/27/2024 at 7:39 PM, mggandes said:

@tuanphan 

Sorry about that.

Here's the link:

https://memorystrategy.squarespace.com/

 

Thank you

Which button are you referring to? Have you added Code Block yet?

Both buttons. Yes. I added the code block in each section when I started doing this.

 Yes. I added the code block in each section when I started doing this.

On 9/2/2024 at 8:19 PM, mggandes said:

 Yes. I added the code block in each section when I started doing this.

I think you added to another page because I don't see any Code Blocks on Homepage Page

https://memorystrategy.squarespace.com/

Hi @tuanphan, I just followed the underlined step below and my understanding is the code block will be added to the sections I made. 

I didn't see any step that I needed to add the code block to homepage page 😞

please help.

21 hours ago, mggandes said:

Hi @tuanphan, I just followed the underlined step below and my understanding is the code block will be added to the sections I made. 

I didn't see any step that I needed to add the code block to homepage page 😞

 

please help.

But, on page you shared, I don't see any Code Blocks. Which page you added Code Block? Can share link to that page?

Here's the link and screenshots so that you could easily find it:

https://memorystrategy.squarespace.com/real-results-2

Also, I temporarily deleted the CSS code in the website because it affects the color/format of all the buttons in all website pages. Do you know why?