Using a details/summary element as a CSS 'toggle'

[Dan Q]

In the shoutbox/chat, @IndigoGolem was looking for a way to have a checkbox or similar control that, when checked, would engage an animation on their profile page. They were having difficulty doing so, and I came up with a few ideas... and then realised that others here might be interested in them too.

In each case, what I'm trying to do is have (a) something that works a bit like a toggle button that (b) makes something else on the page get a CSS animation.

Here's what I came up with (there are definitely other approaches too!):

#1: <details>/<summary> with animated component right after it

A really simple one. Here's what I did (see it on Codepen):

Code

<!-- this will become the "toggle button": -->
<details><summary>Shake Yer Face!</summary></details>

<!-- this is the thing we'll animate: -->
<div id="spinning-thing">😅</div>

<style>
/* Make the <details>/<summary> look like a button: */
summary {
  all: unset;
  display: inline-block;
  cursor: pointer;
  border: 1px solid gray;
  background: lightgray;
  padding: 8px 12px 4px 12px;
  margin: 4px 0;
  
  &::marker {
    display: none;
  }
}

/* Make our "button" change color when toggled on:
 * See the use of the [open] attribute to detect the open <details> panel!
 */
details[open] summary {
  background: lightgreen;
}

/* When the details is open, the #spinning-thing that's next to it gets the animation: */
details[open] + #spinning-thing {
  animation: jiggle-your-face 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

/* Here's the animation definition: */
@keyframes jiggle-your-face {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70% {
    transform: translateX(-10px);
  }
  20%, 40%, 60% {
    transform: translateX(10px);
  }
  80% {
    transform: translateX(8px);
  }
  90% {
    transform: translateX(-8px);
  }
}
</style>

#2: <details>/<summary> with animated component somewhere else on the page!

What if you don't want to have to put the animated-thing right after the "button"? I've got you covered. So long as both the <details><summary>...</summary></details> and the animated thing share an ancestor (that you can identify with CSS)... then you can use the CSS :has selector!

Here's how I did it (see it on Codepen) -

Assume our HTML looks a bit like this, with our "button" and our animated-thing sharing a common ancestor, a <div id="#container"> -

Code

<div id="container">
  <section>
    <h2>Buttons!</h2>
    <details><summary>Shake Yer Face!</summary></details>
  </section>
  
  <section>
    <h2>Things!</h2>
    <div id="spinning-thing">😅</div>
  </section>
</div>

All of our CSS to make the details/summary "look like a button" stays the same, but now our selector to detect when the button's "pressed" and apply the animation looks like this:

Code

/* ... original CSS ... */

#container:has(details[open]) #spinning-thing {
  animation: jiggle-your-face 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

Here's what that long selector means. It looks for something with id="container" that :has (contains) an open <details>... and if such a thing exists, it looks inside that id="container" thing for something with id="spinning-thing", and applies the animation. Easy, right!

As I said, there are definitely other ways to achieve this, but that's just two to get you started. Have fun making your profile pages go wild with crazy animations! (And let me know when you've done so, in this thread, so I can go see them!)