Skip to content

Instantly share code, notes, and snippets.

@obrenoco

obrenoco/html-tags-details-summary.html

Last active October 22, 2023 11:20
Show Gist options
  • Save obrenoco/d2945df7ce917957c0c7905bfcd81e11 to your computer and use it in GitHub Desktop.
Save obrenoco/d2945df7ce917957c0c7905bfcd81e11 to your computer and use it in GitHub Desktop.
Download ZIP
HTML + CSS | Native accordion + Open Animation
Raw
html-tags-details-summary.html
<!DOCTYPE html>
<html>
<head>
<style>
summary {
cursor: pointer;
list-style: none;
}
details[open] summary ~ * {
animation: toggle 0.1s ease-in-out;
}
@keyframes toggle {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
details svg {
transition: all 0.3s ease;
}
details[open] svg {
transform: rotate(90deg);
}
</style>
</head>
<body>
<details>
<summary>
<svg width="10" height="10">
<polygon points="0,0 0,10 10,5" style="fill: blue;" />
</svg>
Open me !
</summary>
<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details">
More info about native accordion here.
</a>
</details>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment