How to toggle/Add/Remove class attribute values of a target element (using hx-on:click or extension)?

[mkgn]

Use case is something like you click on a button and hide the sidebar menu. I don't see an hx attribute to change the values of other attributes like class. There is an extension class-tools but it doesn't work for this purpose. So I ended up doing below which works

<button hx-on="click: document.getElementById('side-bar-menu').classList.toggle('hide')"/>
<div id="side-bar-menu" class="visible">[menu content]</div>

Since this is quite verbose I was thinking whether I can implement an extension to do this so above will end up like below

<button hx-target"side-bar-menu" hx-attribute="class" hx-value="hide"/>
<div id="side-bar-menu" class="visible">[menu content]</div>

Note that I am trying to reuse hx-target which will give me the side-bar-menu div and then i do the rest. Can this be done already without sprinkling js code in elements? Maybe this extension can be extended to do a subset of mostly used attribute manipulations?

[osttra-j-sernbrant]

Found this somewhat simpler solution

hx-on:click="htmx.toggleClass(htmx.find('#side-bar-menu'), 'hide')"