More complex toggling example ?

[unoexperto]

Hello ! I'm new to hyperscript and after trying for couple hours I couldn't implement toggling in the following snippet

<ul role="list" class="flex flex-1 flex-col gap-y-7">
    <li>
        <ul role="list" class="-mx-2 space-y-1">
            <li>
                <a href="#"
                   class="bg-neutral-300 text-indigo-600 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
                    <svg></svg>
                    Tab1
                </a>
            </li>
            <li>
                <a href="#"
                   class="text-gray-700 hover:text-indigo-600 hover:bg-neutral-300 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
                    <svg></svg>
                    Tab2
                </a>
            </li>
            <li>
                <a href="#"
                   class="text-gray-700 hover:text-indigo-600 hover:bg-neutral-300 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
                    <svg></svg>
                    Tab3
                </a>
            </li>
        </ul>
    </li>
</ul>

What I want to happen on click is

1. Classes bg-neutral-300 and text-indigo-600 removed from currently active element;
2. Class text-gray-700 added to currently active element;
3. Classes bg-neutral-300 and text-indigo-600 added to clicked on element;
4. Classes hover:text-indigo-600 and hover:bg-neutral-300 removed from clicked on element.
5. I don't want hyperscript to traverse entire DOM (looking for .tab class or something) and work only on "a" children of "ul";
6. I want it to work even if click was on svg inside a element.

I tried using take and toggle commands and expressions like event.target.closest('<a/>') and couldn't achieve the result. I also struggled to understand how to add/remove several classes at once.

Could you please help me ?

Maintainers - please enable discussions in the repository