Can I have the toggle button configured so that 2 off canvas items are triggered?

How To
1

Is it possible to have the toggle trigger set so that 2 off canvas elements are triggered? I want a full screen menu to appear, with 60% sliding from the left and 60% sliding from the right, to appear as one menu. I’ve tried to create 2 off canvas elements, contain nav items, then giving them the same ID and using that as the CSS selector in the toggle but only one of the off-canvas menus appear when clicking on the toggle. Is it possible or is there a better way to do it?

1 Like
2

You must use two toggles, hide one of them (display:none) and a little JavaScript for the opening effect.

Swap out the ID’s with the ones with yours and below is the javascript to do this. Make sure the element you wish for people to click is used in element1

<script>
  // Get references to the elements
  var element1 = document.getElementById('brxe-twvwyq');
  var element2 = document.getElementById('brxe-dbgjxa');

  // Add click event listener to the first element
  element1.addEventListener('click', function() {
    // Trigger click event on the second element
    element2.click();
  });
</script>

I hope that helps!

3

When I try this, I get this error:

Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)