<Light Disclosure>

A <details> element packaged nicely to animate like a disclosure.

Typical Usage

Imports

Script

HTML

<!-- Auto registers as <light-disclosure> -->
<script type="module" src="https://cdn.jsdelivr.net/npm/light-pen/exports/light-disclosure-register.js"></script>

CDN

HTML

<script type="module">
  // Auto registers as <light-disclosure>
  import "https://cdn.jsdelivr.net/npm/light-pen/exports/light-disclosure-register.js"

  // Manual Register
  import LightDisclosure from "https://cdn.jsdelivr.net/npm/light-pen/exports/light-disclosure.js"
  LightDisclosure.define()
  // => Registers as <light-disclosure>
</script>

Bundler

JavaScript

// Auto registers as <light-disclosure>
import "light-pen/exports/light-disclosure-register.js"

// Manual Register
import LightDisclosure "light-pen/exports/light-disclosure.js"
LightDisclosure.define()
// => Registers as <light-disclosure>

Slots

Name	Description
`default`	The code to use for highlighting

Attributes

Name	Description	Reflects	Type	Default
[Attribute + Property] `summary`	-	-	`string`	`""`
[Attribute + Property] `open`	-	-	`boolean`	`false`

Events

Name	Description
`light-toggle`	-

Functions

Name	Description	Parameters
`click()`	-	-
`focus()`	-	`options: FocusOptions`
`handleTransitionEnd()`	-	`e: TransitionEvent`
`handleToggle()`	Toggle fires after the attribute is set / unset, so its useless for expanded. But useful for when users search a page with "ctrl+f"	`_e: Event`
`handleSummaryClick()`	-	`e: Event`

<light-code>

<light-editor>