#8013

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('section.page-section').each(function(){
    var layclass = $(this).find('.code-block .cbsc').attr('class');
    $(this).addClass(layclass);
});

var menuButtons = {
    menu01: {
        buttonSelector: 'a[href="#menu01"]',
        sectionClass: '.menu01-section' 
    },
    menu02: {
        buttonSelector: 'a[href="#menu02"]',
        sectionClass: '.menu02-section'
    }
};

var activeColor = '#8c0741';
var defaultMenuId = 'menu01';

function switchMenu(menuId) {
    var menu = menuButtons[menuId];
    $(menu.sectionClass).addClass('show-section').removeClass('hide-section');
    $('section.cbsc:not(' + menu.sectionClass + ')').removeClass('show-section').addClass('hide-section');
    $(menu.buttonSelector).addClass('change-button-style');
    $('a:not(' + menu.buttonSelector + ')').removeClass('change-button-style');
}

for (var menuId in menuButtons) {
    $(menuButtons[menuId].buttonSelector).click(function(menuId) {
        return function() {
            switchMenu(menuId);
        };
    }(menuId));
}

switchMenu(defaultMenuId);
});
</script>
<style>
  section.page-section.hide-section {
      display: none !important;
  }
  section.page-section.show-section {
      display: block !important;
  }
  .change-button-style {
      background-color: #8c0741 !important;
  }
</style>