Nav dropdown opens on click (as stays open) and closes on click instead of hover

Site URL: https://ccsdisabilityaction.squarespace.com/

Hi there,

I'm recreating a webiste and I'm trying to find out how to have a dropdown folder to open and close on click instead of showing up on hower. This is a requirement because the page is for disabled people. Anyone can help?

Website PW: 1234

Any hints are highly appreciated.

Thank you!

Click on arrow, or click on both arrow or folder title?

Hi Tuanphan, thank you for your reply.

In an accessibility perspective both should do the same. So click on both text or arrow should open/close the folder. 

Try adding to Last Line in Settings > Advanced > Code Injection > Footer

<script>
  $(document).ready(function(){ $("div.header-nav-item--folder").click(function(){
  $('.header-nav-folder-content').toggleClass('show-folder');
});
});
</script>
<style>
  .header-nav .header-nav-item--folder:hover .header-nav-folder-content {
    opacity: 0 !important;
    position: absolute !important;
}
 .header-nav .header-nav-item--folder .header-nav-folder-content.show-folder {
    opacity: 1 !important;
    position: relative !important;
}
</style>

OMG Thank you very much, this is exactly what I was looking for ! You're the best!