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

On 9/18/2024 at 8:53 PM, mggandes said:

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>

I meant the code you removed, because your 1st, 2nd is just html, it won't affect to the site

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.

@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).

On 9/27/2024 at 8:28 PM, mggandes said:

@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).

Edit this Section > paste this code into Code Block

<div class="cbsc hide-section parents-section"></div>

This code will hide section on Initial

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.

On 9/30/2024 at 7:44 PM, mggandes said:

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.

Can you add me as a contributor? I can test check in edit mode easier.

Or you can describe all steps + code you added? I can troubleshoot problem easier

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.