Demonstrate how multiple classes can be toggled #625

andrewah64 · 2025-05-19T09:03:00Z

andrewah64
May 19, 2025

The documentation of "toggle" states that it can operate on a "set of classes", but no examples (that I can find) are given in the documentation. The best I could do to solve this problem is below:

<html>
	<head>
		<script src="https://unpkg.com/[email protected]"></script>
	</head>
	<body>
		<script type="text/hyperscript">
			behavior ToggleMenu(svg)
				on click from me
					increment :x
					
					if :x mod 2 == 0
						remove .transform     from svg 
						remove .rotate-90     from svg
						remove .text-gray-500 from svg
						add    .text-gray-400 to   svg		
					else
						add    .transform     to   svg
						add    .rotate-90     to   svg
						add    .text-gray-500 to   svg
						remove .text-gray-400 from svg
					end
				end
			end
		</script>
		<button _="install ToggleMenu(svg : #svg-id)">
			<svg id="svg-id"
			     class="size-5 shrink-0"
			     viewBox="0 0 20 20"
			     fill="currentColor"
			     aria-hidden="true"
			     data-slot="icon">
				<path fill-rule="evenodd"
				      d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
				      clip-rule="evenodd" />
			</svg>
			Rotate
		</button>
	</body>
</html>

Is there a better way of toggling multiple classes than this in Hyperscript?
From the documentation, what I was expecting to be able to do was some something along the lines of the below. If there isn't a better way of implementing the behavior above, is supporting the syntax (or something similar) below something that could be considered?

behavior ToggleMenu(svg)
	on click from me
		toggle between [.transform, .rotate-90, .text-gray-500] and [.text-gray-400] on svg
	end
end

Thanks,

Andrew

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Demonstrate how multiple classes can be toggled #625

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Demonstrate how multiple classes can be toggled #625

Uh oh!

Uh oh!

andrewah64 May 19, 2025

Replies: 0 comments

andrewah64
May 19, 2025