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つのスタイルに絞ればかなり少ないコードで実装出来ますね。