Drawer Toggle Button

I recently implemented a table of contents button for long-form content that opens a drawer (using Nick Arce’s drawer component), and I want the button to open and close the drawer. After spending some time unsuccessfully with ChatGPT, I reached out to Nick to see if this could be added to the component. While I don’t know if it will eventually find its way into the component, he sent me the necessary code in about 5 minutes.

If you were trying to do the same thing, you just need to make sure the selector assigned to open your drawer replaces .toc-trigger

document.querySelectorAll('.toc-trigger').forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.stopImmediatePropagation();
    const drawer = document.querySelector('#toc-drawer')?._drawer;
    if (drawer) drawer.isOpen ? drawer.close() : drawer.open();
  }, true);
});

document.querySelectorAll('.toc-trigger').forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.stopImmediatePropagation();
    const drawer = document.querySelector('#toc-drawer')?._drawer;
    if (drawer) drawer.isOpen ? drawer.close() : drawer.open();
  }, true);
});