CSS Details Element: tabbed summary, rotating background

by Matthew Schenker

HTML

<div class="details-box">
<details>
<summary>Click me</summary>
<div class="inner-details">
<p>This is a great way to show/hide some content with a user-friendly click!!</p>
</div>
</details>
</div>

<div class="details-box">
<details>
<summary>Click me</summary>
<div class="inner-details">
<p>This is a great way to show/hide some content with a user-friendly click!!</p>
</div>
</details>
</div>

CSS

/* More information on the 'Details" element: https://www.sitepoint.com/style-html-details-element/ */

.details-box {
	margin-bottom: 20px;
}

details {
  display: inline-block;
  border-radius: 5px;
}

summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  padding: 10px;
  font-weight: bold;
  background-color: #a3d4fb;
  color: #30353b;
  border-radius: 5px;
  cursor: pointer;
}

summary::after {
  content: '';
  width: 18px;
  height: 10px;
  background: url('https://uploads.sitepoint.com/wp-content/uploads/2023/10/1697699669arrow.svg') no-repeat;
  background-size: cover;
  margin-left: .75em;
  transition: 0.5s;
}

details[open] > summary::after {
  transform: rotate(180deg);
}

summary::-webkit-details-marker {
  display: none;
}

details[open] summary {
	border-radius: 5px 5px 0 0;
}

.inner-details {
	padding: 10px;
	margin: 0;
	background: #a3d4fb;
	border-radius: 0 5px 5px 5px
}

/* Code for fade-in effects */
details[open] .inner-details {
  animation: fadeIn 2s linear forwards;
}

@keyframes fadeIn {
 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }
}