Smart Element Toggle

Demonstrating smart detection and toggle for <dialog>, <details>, <summary>, and <select> elements.

📱 Dialog Elements Dialog

Dialog Toggle (Non-Modal & Modal)

<button _="on click toggle #infoDialog">Non-Modal</button> <button _="on click toggle #alertDialog modal">Modal</button>

📂 Details Elements Details

Accordion / FAQ with Toggle

<button _="on click toggle #faq1">Toggle FAQ 1</button> <details id="faq1"> <summary>What is LokaScript?</summary> <p>Content here...</p> </details>

What is LokaScript?

LokaScript is a complete hyperscript ecosystem with smart element detection, making web interactions natural and concise.

How does smart toggle work?

Smart toggle automatically detects interactive elements like dialog, details, and select, and toggles their state appropriately without needing explicit method calls.

Is it compatible with _hyperscript?

Yes! LokaScript maintains compatibility with official _hyperscript syntax while adding enhanced features and smart detection.

Summary Element Toggle (Automatic Parent Detection)

<button _="on click toggle #summary1">Toggle via Summary</button> <details> <summary id="summary1">Click me or the button</summary> <p>Content expands when you toggle the summary!</p> </details>

When you toggle a <summary> element, it automatically finds and toggles the parent <details>.

✨ Advanced Summary Toggle

This demonstrates that you can target the summary element directly!

The toggle command automatically detects the parent details and toggles it.

✅ toggle #summaryElement works
✅ toggle #detailsElement works
✅ Both achieve the same result

🎚️ Select Elements Select

Programmatic Dropdown Control

<button _="on click toggle #countrySelect">Toggle Dropdown</button> <select id="countrySelect"> <option>USA</option> <option>Canada</option> </select>

🎨 Combined Smart Toggle

Interactive Settings Panel

📊 Summary Reference