mggandes

Hi @tuanphan I just followed the steps and codes advised here. Here are the steps that I followed to Show / Hide Contents in a section If I click a Button: 1. These are the initial codes you advised me to paste in CSS codes (but I deleted them because they affect the color and format of all the buttons on our website pages): <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { // do not remove this code $('section.page-section').each(function(){ var layclass = $(this).find('.code-block .cbsc').attr('class'); console.log(layclass); $(this).addClass(layclass); }); // parents $('a[href="#menu01"]').click(function(){ $('.menu01-section').addClass('show-section').removeClass('hide-section'); $('section.cbsc:not(.menu01-section)').removeClass('show-section').addClass('hide-section'); $(this).addClass('change-button-style'); $('a:not([href="#menu01"])').removeClass('change-button-style'); }); // professionals $('a[href="#menu02"]').click(function(){ $('.menu02-section').addClass('show-section').removeClass('hide-section'); $('section.cbsc:not(.menu02-section)').removeClass('show-section').addClass('hide-section'); $(this).addClass('change-button-style'); $('a:not([href="#menu02"])').removeClass('change-button-style'); }); </script> <style> section.page-section.hide-section { display: none !important; } section.page-section.show-section { display: block !important; } .change-button-style { background-color: green !important; } 2. Then, I added the following codes in the code block in each section (Parents & Professionals): Parents section: <div class="cbsc show-section parents-section"></div> Professional section: <div class="cbsc hide-section professionals-section"></div> 3. Then you provide a new code because you updated our ID on our page. I pasted these codes to Website Tools > Code Injection > Footer: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { // do not remove this code $('section.page-section').each(function(){ var layclass = $(this).find('.code-block .cbsc').attr('class'); console.log(layclass); $(this).addClass(layclass); }); // parents $('div.button-block a[href="#parents"]').click(function(){ $('.parents-section').addClass('show-section').removeClass('hide-section'); $('section.cbsc:not(.parents-section)').removeClass('show-section').addClass('hide-section'); $(this).addClass('change-button-style'); $('div.button-block a:not([href="#parents"])').removeClass('change-button-style'); }); // professionals $('div.button-block a[href="#professionals"]').click(function(){ $('.professionals-section').addClass('show-section').removeClass('hide-section'); $('section.cbsc:not(.professisionals-section)').removeClass('show-section').addClass('hide-section'); $(this).addClass('change-button-style'); $('div.button-block a:not([href="#professionals"])').removeClass('change-button-style'); }); }); </script> <style> section.page-section.hide-section { display: none !important; } section.page-section.show-section { display: block !important; } .change-button-style { background-color: #08AFC7 !important; } </style> It worked but after all these codes when the Parents button is clicked the Professional section and its contents are still showing (which by the way we like to hide at first and will only show whenever its button is clicked) 4. So, you provide another code to hide the section initially, I Edit the "Professional" section > paste the code into Code Block: <div class="cbsc hide-section parents-section"></div> After this, the whole section is hidden when the Professional button is clicked. So, I decided to remove the Code block with that code (<div class="cbsc hide-section parents-section"></div>) so that the Professional section will be seen at least for now I hope these steps make sense. Thank you as always.

hi @tuanphan it seems the code is not working. I added the code you provided (in the code block) to the Professional section (as shown in the image you sent) , it doesn't hide the Professional section initially and when the Professional button is clicked the Professional section is hidden totally.

@tuanphan Thank you so much it seems it's working now. However, when the Parents button is clicked the Professionals section is still shown, so whenever someone scrolls downward they will see the Professional part already (even if they clicked the Parents button only).

Here's the code that I removed temporarily: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { // do not remove this code $('section.page-section').each(function(){ var layclass = $(this).find('.code-block .cbsc').attr('class'); console.log(layclass); $(this).addClass(layclass); }); // parents $('a[href="#menu01"]').click(function(){ $('.menu01-section').addClass('show-section').removeClass('hide-section'); $('section.cbsc:not(.menu01-section)').removeClass('show-section').addClass('hide-section'); $(this).addClass('change-button-style'); $('a:not([href="#menu01"])').removeClass('change-button-style'); }); // professionals $('a[href="#menu02"]').click(function(){ $('.menu02-section').addClass('show-section').removeClass('hide-section'); $('section.cbsc:not(.menu02-section)').removeClass('show-section').addClass('hide-section'); $(this).addClass('change-button-style'); $('a:not([href="#menu02"])').removeClass('change-button-style'); }); </script> <style> section.page-section.hide-section { display: none !important; } section.page-section.show-section { display: block !important; } .change-button-style { background-color: green !important; } Thanks as always.

Sorry about that. 1st section (Parents): <div class="cbsc show-section parents-section"></div> 2nd section (Professionals): <div class="cbsc hide-section professionals-section"></div>

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?

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.

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

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

@tuanphan Sorry about that. Here's the link: https://memorystrategy.squarespace.com/ Thank you

Sorry about that. Here's the link: https://memorystrategy.squarespace.com/

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 🙂

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

Here's the link: https://memorystrategy.squarespace.com/real-results-2 I really appreciate any help you can provide.

@tuanphan