Click Button – Show Menu Block (Section)

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

Password: abc

#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

Make sure “Open link in new tab” is disabled

When clicking the button will show menu block sections under.

#2.  Create 5 sections below and design the menu section to what you want, here is my example:

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

• Initial: Show top section (Menu 01 section)
• Hide 4 sections (Menu 02, Menu 03, Menu 04, Menu 05)

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 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