Result

detailsタグを使った開閉コンテンツのスタイリングサンプル集です。

JSは開閉時のアニメーションに使用されているので、無くても開閉やアイコンのアニメーションに影響はありません。

css

[data-css-icon] {
--animdur: .3s;
--loading-animdur: 0.8s;
--animtf: ease-in;
--bdw: 2px;
--bdrs: 50%;
--bgc: transparent;
--c: currentcolor;
--dots-bgc: silver;
--dots-size: 0.5rem;
--icon-size: 1rem;
--size: 2.5rem;

align-items: center;
cursor: pointer;
display: flex;
justify-content: space-between;
}

[data-css-icon] i {
  align-items: center;
  background-color: var(--bgc);
  border-radius: var(--bdrs);
  box-sizing: border-box;
  display: inline-flex;
  height: var(--size);
  justify-content: center;
  position: relative;
  transition: background-color var(--animdur) var(--animtf);
  width: var(--size);
}
[data-css-icon] i::after,
[data-css-icon] i::before {
transform-origin: 50% 50%;
transition: all var(--animdur) var(--animtf);
}

[data-css-icon*="down"] i::after,
[data-css-icon*="right"] i::after {
background: transparent;
border-color: var(--c);
border-style: solid;
box-sizing: border-box;
content: '';
display: inline-block;
height: var(--icon-size) ;
margin: 0;
position: relative;
width: var(--icon-size);
}
[data-css-icon*="down"] i::after {
border-width: 0 var(--bdw) var(--bdw) 0;
top: calc(0px - (var(--icon-size) / 4));
transform: rotate(45deg);
}
[data-css-icon*="right"] i::after {
border-width: var(--bdw) var(--bdw) 0 0;
right: calc((var(--icon-size) / 4));
top: 0;
transform: rotate(45deg);
}

アイコンはCSSで作られていますので画像不要となっています。

基本的な部分はCSS変数で定義します。開閉コンテンツには予めカスタムデータ属性を付与した要素を含めてあり、その要素にアイコンも含められています。

html

<details>
  <summary>
    <span data-css-icon="down">Down To Up<i></i></span>
  </summary>
  <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis.
  </div>
</details>

1つのスタイルに絞ればかなり少ないコードで実装出来ますね。

via

details Animation