Click Text show Menu Block (v2)

Demo: https://tuanphan-demo01.squarespace.com/click-text-show-menu-block?noredirect

Password: abc

Suppose you have 3 Texts.

You want: when users click on each Text > Show Menu Block.

#1. First, you add a Text Block with some text/url.

Make sure the option “Open link in new tab” is disabled

#breakfast
#lunch
#dinner

and 3 Menu Block Sections below. Here is just a simple example, you can design the menu to what you want.

#2. Install Squarespace ID Finder to find the ID of the Menu Block.

In my example, we will have:

Meal breakfast: #block-yui_3_17_2_1_1714640883588_12238
Meal lunch: #block-yui_3_17_2_1_1714640883588_99888
Meal dinner: #block-yui_3_17_2_1_1714640883588_101798

#3. Use 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(){
  // Breakfast
  $("#block-yui_3_17_2_1_1714640883588_12238").closest('.fe-block').addClass('breakfast show');
  // Lunch
$("#block-yui_3_17_2_1_1714640883588_99888").closest('.fe-block').addClass('lunch');
  // Dinner
$("#block-yui_3_17_2_1_1714640883588_101798").closest('.fe-block').addClass('dinner');
  
  // Breakfast
  $('a[href="#breakfast"]').click(function(){
    $(".breakfast").addClass("show");
    $('.fe-block:not(.breakfast)').removeClass('show');
    }
  );
// Lunch
 $('a[href="#lunch"]').click(function(){
   $(".lunch").addClass("show");
    $('.fe-block:not(.lunch)').removeClass('show');
    }
  );
// Dinner
 $('a[href="#dinner"]').click(function(){
   $(".dinner").addClass("show");
    $('.fe-block:not(.dinner)').removeClass('show');
    }
  );
});
</script>
<style>
.breakfast .menu-block, .lunch .menu-block, .dinner .menu-block {
    display: none;
}
  .show .menu-block {
      display: block !important;
  }
  .show {
      z-index: 999999 !important;
  }
</style>

#4. Explain code