<p style="text-align:center"><a style="font-size: 1.5em" href="https://codepen.io/tzptzptzptzptzp/pen/dygRYJd" target="_blank" rel="noopener noreferrer">実装サンプルを見る</a></p><h2 id="hf64c0339ae">TypeScript &amp; SCSS</h2><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Ftzptzptzptzptzp%2Fembed%2Fpreview%2FvYVmQQQ%3Fdefault-tabs%3Djs%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DvYVmQQQ&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Ftzptzptzptzptzp%2Fpen%2FvYVmQQQ&image=https%3A%2F%2Fshots.codepen.io%2Fusername%2Fpen%2FvYVmQQQ-512.jpg%3Fversion%3D1682788702&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="h81943f9f32">JavaScript &amp; CSS</h2><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Ftzptzptzptzptzp%2Fembed%2Fpreview%2FdygRYJd%3Fdefault-tabs%3Djs%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DdygRYJd&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Ftzptzptzptzptzp%2Fpen%2FdygRYJd&image=https%3A%2F%2Fshots.codepen.io%2Fusername%2Fpen%2FdygRYJd-512.jpg%3Fversion%3D1682789637&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="h4d849f4362">使い方</h2><p>クラスを呼び出し、アコーディオンボタンになる要素を引数に指定します。<br>スタイルの調整は[.box]ベースで行います。<br>アコーディオン展開時に一番上の要素[.ac]に[.show]クラスが付与されます。<br>展開時のスタイルなどを調整する際は[.show]を利用してください。<br></p>

コピペで使える
JavaScriptレシピ(TypeScript対応)や
よりサイト制作を行いやすくなる
ノウハウを発信中

レシピ

JavaScript

CSS

HTML

テツカヒロキ

コピペで使えるJavaScriptレシピ(TypeScript対応)やよりサイト制作を行いやすくなるノウハウを発信中

レシピ

JavaScript

CSS

HTML

コピペで使える
JavaScriptレシピ(TypeScript対応)や
よりサイト制作を行いやすくなる
ノウハウを発信中