• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Properties
  2. Events
  3. Methods
    1. focusInner() => Promise<void>
  4. Shadow Parts
  5. Dependencies
    1. Used by
    2. Depends on
    3. Graph
Components Accordion Accordion Toggle
(external link)

ld-accordion-toggle #

The ld-accordion-toggle component is a subcomponent for ld-accordion.

Please refer to the ld-accordion documentation for usage examples.

Properties #

Property Attribute Description Type Default
disabled disabled Disables the toggle. boolean undefined
key key for tracking the node's identity when working with lists string | number undefined
labelTag label-tag Tag to be used for the toggle label in split mode. This prop is especially usefull, if you want to place your own focusable element inside the toggle label element. "button" | "div" 'button'
ldTabindex ld-tabindex Tab index of the toggle. number undefined
ref ref reference to component any undefined
split split Split the toggle in two parts with the second part containing the caret icon and being responsible for expanding / collapsing the accordion panel. boolean undefined
toggleLabel toggle-label Used as aria-label value on the toggle trigger element. string 'Toggle'

Events #

Event Description Type
ldaccordionlabelclick Emitted on click of the accordion toggle label. CustomEvent<undefined>
ldaccordiontoggleclick Emitted on click of the accordion toggle trigger. CustomEvent<undefined>

Methods #

focusInner() => Promise<void> #

Focuses the toggle

Returns #

Type: Promise<void>

Shadow Parts #

Part Description
"content"
"focusable"
"label"
"label-content"
"toggle"
"trigger"
"trigger-content"
"trigger-icon"

Dependencies #

Used by #

  • ld-cookie-consent
  • ld-sidenav-accordion

Depends on #

  • ld-icon

Graph #

graph TD;
  ld-accordion-toggle --> ld-icon
  ld-cookie-consent --> ld-accordion-toggle
  ld-sidenav-accordion --> ld-accordion-toggle
  style ld-accordion-toggle fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS