Help: Toggle Class From Another Element?

[unijez]

Is it possible to toggle a class from another element, for example a slide navigation panel controlled via burger button. Once open close from another div.

Currently i have 2 buttons, the first opens the panel, adding active class, the second appears within that panel to close it, both are below...

Open Panel...
<button type="button" class="site-header__mobile-button lines-nav main-btn " data-toggle-class data-toggle-escape data-toggle-target=" .whole-page, .navigation-panel_holder, .navigation-panel_main, body" title="Navigation">Open Menu</button>

Once open close panel...
<button type="button" class="navigation-panel_main-button main-btn " data-toggle-class data-toggle-escape data-toggle-target=" .whole-page, .navigation-panel_holder, .navigation-panel_main, body" title="Navigation">Close Menu</button>

Both these work fine, but would it be possible to add another class, i'e an overlay outside of the panel so when you click anywhere else it toggles the above?

So a div click toggle class the above, the i try and set this up it seems to do funny things.

[Twikito]

Thanks for your question.

Did you try adding data-toggle-outside attribute on your trigger button ?

By the way, if your close button is inside your navigation panel, you only need to add data-toggle-trigger-off attribute, nothing else.

Hope that will help you.

[unijez]

Thank you for the suggestion, the above buttons appear separately.

Unfortunately your suggestion doesn't work, because its a div that wraps everything, so clicking anywhere obviously turns it on.

<div type="button" data-toggle-class data-toggle-escape data-toggle-target=" .whole-page, .navigation-panel_holder, .navigation-panel_main, body" class="whole-page" data-toggle-outside>

Ideally i only want the one above to function when it has an is-active class on it.

[Twikito]

Ok, is this what you need ? https://codepen.io/Twikito/pen/VdJVop

[unijez]

Yes! Perfect, how does the day area know to close it again?

[Twikito]

It's a CSS pseudo element inside the trigger button 😉

[unijez]

Amazing, thank you :)