Skip to content

Instantly share code, notes, and snippets.

@jssteinberg
Created July 8, 2022 09:19
Show Gist options
  • Save jssteinberg/cb06ba43af1bb22b5188ac99d93be60e to your computer and use it in GitHub Desktop.
Save jssteinberg/cb06ba43af1bb22b5188ac99d93be60e to your computer and use it in GitHub Desktop.
<summary
className="button button--filter"
>
<svg className="icon--open" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.84082 1.25V14.75" stroke="#333333" strokeWidth="1" />
<path d="M14.5 8.09122L1 8" stroke="#333333" strokeWidth="1" />
</svg>
<svg className="icon--close" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.5 8.09122L1 8" stroke="#333333" strokeWidth="1" />
</svg>
{toggleLabel}
</summary>
<style jsx>{`
details[open] summary {
background: var(--bg);
}
.button--filter {
--button-border-color: currentColor;
}
/* Icon */
details:not([open]) .icon--close {
display: none;
}
details[open] .icon--open {
display: none;
}
`}</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment