Repository navigation
More complex toggling example ? #465
Description
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
- Classes
bg-neutral-300andtext-indigo-600removed from currently active element; - Class
text-gray-700added to currently active element; - Classes
bg-neutral-300andtext-indigo-600added to clicked on element; - Classes
hover:text-indigo-600andhover:bg-neutral-300removed from clicked on element. - I don't want hyperscript to traverse entire DOM (looking for .tab class or something) and work only on "a" children of "ul";
- 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 ?
Activity
FDiskas commentedon Aug 25, 2023
Maintainers - please enable discussions in the repository