Show Dropdown Menu on Click, not Hover

To make dropdown menu appears on click, not hover on Squarespace, you can follow these.
#1. First, use this code to the Custom CSS box

div.header-nav-folder-content {
    display: none;
}

image

#2. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('a.header-nav-folder-title').click(function(event) {
    event.preventDefault();
    var $boxSub = $(this).closest('.header-nav-item--folder').find('.header-nav-folder-content');
    $boxSub.toggle();
  });
});
</script>