[Share] Click Button – Show Menu Block (Section)

Description: Clicking on each button >> Show corresponding menu section under.

Demo: https://tuanphan-demo01.squarespace.com/cbutton-smenu-block?noredirect

Pass: abc

How to

If you can't make code work, you can comment below with link to page where you use code, I can check easier.

#1. Suppose you have 5 buttons with name: Menu 01, Menu 02, Menu 03, Menu 04, Menu 05

and URL: #menu01, #menu02, #menu03, #menu04, #menu05

Quote

Make sure “Open link in new tab” is disabled

#2. Create 5 sections under and design the sections to what you want, here is my example (with 2 sections)

#3. After you have 5 buttons with 5 sections, next

You need to edit the first section (Menu 01 section) > Add a Code Block > Paste this code

<div class="cbsc show-section menu01-section"></div>

Next, You need to edit 4 sections (Menu 02, Menu 03, Menu 04, Menu 05) > Add a Code Block > Paste this code

With Menu 02 section, use this code:

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

With Menu 03 section, use this code:

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

With Menu 04 section, use this code:

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

With Menu 05 section, use this code:

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

#4. Use this code to Website Tools > Code Injection – Footer or Page Header Code Injection

<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);
});
  // menu01
  $('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');
  });
  // menu02
  $('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');
  });
 // menu 03 
  $('a[href="#menu03"]').click(function(){
      $('.menu03-section').addClass('show-section').removeClass('hide-section');
    $('section.cbsc:not(.menu03-section)').removeClass('show-section').addClass('hide-section');  
      $(this).addClass('change-button-style');
    $('a:not([href="#menu03"])').removeClass('change-button-style');
  });
    // menu 04
    $('a[href="#menu04"]').click(function(){
      $('.menu04-section').addClass('show-section').removeClass('hide-section');
    $('section.cbsc:not(.menu04-section)').removeClass('show-section').addClass('hide-section');
        $(this).addClass('change-button-style');
    $('a:not([href="#menu04"])').removeClass('change-button-style');
  });
   // menu 05
   $('a[href="#menu05"]').click(function(){
      $('.menu05-section').addClass('show-section').removeClass('hide-section');
    $('section.cbsc:not(.menu05-section)').removeClass('show-section').addClass('hide-section');  
       $(this).addClass('change-button-style');
    $('a:not([href="#menu05"])').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;
  }
</style>

#5. Explain code

Edited May 10 by tuanphan

Used this to view portfolio content below selected from a carousel and it works great!

Great demo, thanks!

I think I followed the instructions... But still can't figure it out.  

Can you help please: https://summerchang.co/primepage#menu02

I use the code on footer. 

Thank you! 

Edited September 10 by SummerChang

On 9/11/2024 at 2:51 AM, SummerChang said:

I think I followed the instructions... But still can't figure it out.  

Can you help please: https://summerchang.co/primepage#menu02

I use the code on footer. 

Thank you! 

You missed a } symbol somewhere. Can you send exact code you added? We can check easier

This is great @tuanphan, worked for me and can think of a couple of other applications; thanks very much.

Could this be used to show-hide blocks rather than sections? 

How would that work? Thx again.

Edited September 23 by gregaitch

On 9/22/2024 at 4:11 PM, gregaitch said:

This is great @tuanphan, worked for me and can think of a couple of other applications; thanks very much.

Could this be used to show-hide blocks rather than sections? 

How would that work? Thx again.

You can try this, you can apply similar with any blocks