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