Buy me a coffee

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

Click Button Show Menu Block Section 17 Min

and URL:

  • #menu01, #menu02, #menu03, #menu04, #menu05

Make sure “Open link in new tab” is disabled

Click Button Show Menu Block Section 02 Min

Click Button Show Menu Block Section 03 Min

Click Button Show Menu Block Section 04 Min

Click Button Show Menu Block Section 05 Min

Click Button Show Menu Block Section 06 MinWhen 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:

Click Button Show Menu Block Section 07 Min

Click Button Show Menu Block Section 08 Min

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

Click Button Show Menu Block Section 09 Min

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>

Click Button Show Menu Block Section 10 Min

With Menu 03 section, use this code:

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

Click Button Show Menu Block Section 11 Min

With Menu 04 section, use this code:

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

 

Click Button Show Menu Block Section 12 Min

With Menu 05 section, use this code:

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

Click Button Show Menu Block Section 13 Min

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

Click Button Show Menu Block Section 14 Min

#5. Explain code

Click Button Show Menu Block Section 15 Min

 

Click Button Show Menu Block Section 16 Min