The show-hide component provides an open and close state that hides or shows a panel. It can be used to create features in other components where you need some content to be hidden until a user has interacted with the trigger element.
Name Description
slot[name="panel"] Content to put into the show-hide panel
slot[name="trigger"] This slot is displayed when the show-hide element is considered "closed"
slot[name="trigger-open"] This slot is displayed when the show-hide element is considered "open", if there is nothing in this slot then the "trigger" slot is always displayed
::part(base) The base div element
::part(trigger-wrapper) The div element that wraps both trigger slots
::part(panel-wrapper) The div element that wraps the panel slot
Show-Hide Example
Show-Hide Button
Panel content!
Identifying a Show-Hide Trigger Example By default whatever you put into the trigger slot will be the trigger, but sometimes we want to have multiple elements when only one of them is the trigger. To do this we can use an attribute called "data-show-hide-trigger" to identify which elements in our trigger slot should behave as a trigger for the show-hide. This also means that we can have multiple triggers if we would like.
Show-hide Trigger Not a Show-hide Trigger I am also a show-hide trigger Panel content!
Triggering Show-hide on Hover Example We can also control the triggering action by using the "data-show-hide-trigger" attribute. By giving it a value of "hover", we can tell it to use hover interactions instead of click actions.
Show-hide Button
Panel content!
Customizing the Trigger's Open State You can use the "trigger-open" slot to replace what is displayed when the component is in the open state. It functions identically to the "trigger" slot, and will only be displayed if there is something placed in the slot.
Open Panel
Close Panel
Panel content!
Persistent Show-hide States The "persistent" attribute can be used to disable the default behavior of closing a dropdown when an element outside of the show-hide component is clicked.
Non-Persistent Show-hide Button
Clicks outside of my bounds will close the panel.
Persistent Show-hide Button
Only clicking on the trigger again will close the panel.
Show-hide Variants The default variant is "absolute" and behaves more like a dropdown or tooltip and overlaying content. The second variant is "static" which behaves more like an accordion by taking up space when it opens.
Absolute Variant Show-hide Button
This panel overlays content.
Static Variant Show-hide Button
This panel displaces content.