Ability
Startup
Tips
Workstyle
デザイナーの野田沢です。
今回はアコーディオンの実装について記事にしてみます。
※アコーディオンとはボタンクリックでテキストや画像なのどのコンテンツを開閉できるものを一般的にはアコーディオンと呼ばれてます、たぶん！
この記事は非エンジニさんア向けです。
今回はなるべくCSSで実装できるアコーディオンを作ってみました。
今回のポイントは【 ＋ ↔ − 】の切り替えをCCSで実装するところです。
ただのアコーディオンじゃつまらない！という非エンジニアさんは参考にどうぞ。
まずデモを見たい方はコチラ。
下記の記載は順不同ですので、コードを知りたい方は下記リンクよりどうぞ
javascript
html
css
導入
まず、開閉を指示するJSを記述します。
いきなりJSかよ！と思われた方、すみません。
開閉までCSSにするとCSSのコードがごちゃついてしまい、逆に難しくなってしまう為、今回は開閉の動作のみJSを使用することにしました。
だからとっても短いコードですよ
※実行にはjQueryが必要です。
開閉のJSコード
$(function(){
$(".accordion li a").on("click", function() {
$(this).next().slideToggle();
// activeが存在する場合
if ($(this).children(".accordion_icon").hasClass('active')) {
// activeを削除
$(this).children(".accordion_icon").removeClass('active');
}
else {
// activeを追加
$(this).children(".accordion_icon").addClass('active');
}
});
});
2行目の”.accordion li a”で開閉イベントを実行する部分の指定です。みなさんのhtmlコードに合わせて変更してください。
6・8・12行目の”.accordion_icon”が ＋ ↔ − のアイコンclassになります。こちらもhtmlコードに合わせて変更してください。
JSのコードはこれだけです！
htmlコード
<div class="accordion"> <ul> <li> <a class="toggle"> <p class="accordion_icon"><span></span><span></span></p> <h5>タイトル（クリックで開閉します）</h5> </a> <p>アコーディオンの文章が入ります。</p> </li> <li> <a class="toggle"> <p class="accordion_icon"><span></span><span></span></p> <h5>タイトル（クリックで開閉します）</h5> </a> <p>アコーディオンの文章が入ります。</p> </li> </ul> </div>
今回はタイトルとアイコンをひとつのリンクに、アコーディオン自体はリストで量産できるつくりにしました。
必要なのは内包する”accordion”クラスとトリガーとなる”toggle”クラス、そして+-アイコンを表示する”accordion_icon”クラスの3つです。
cssコード
.accordion ul {
width:100%;
padding:0;
}
.accordion li {
position:relative;
border-bottom:1px solid #ccc;
list-style:none;
}
.accordion li:first-child {
border-top:1px solid #ccc;
}
.accordion > ul > li > a {
display: block;
text-decoration: none;
cursor: pointer;
padding: 1.5em 1em;
position: relative;
}
.accordion > ul > li > a h5:hover {
color: #111;
text-decoration:none;
}
.accordion > ul > li > p {
display: none;
text-align:left;
padding:0 .8em 1.4em 1em;
color:#555;
line-height:1.8;
}
.accordion li .accordion_icon,
.accordion li .accordion_icon span {
display: inline-block;
transition: all .3s;
box-sizing: border-box;
}
.accordion li .accordion_icon {
position: absolute;
width: 40px;
height: 40px;
top:20px;
right:10px;
}
.accordion li .accordion_icon span {
position: absolute;
width: 100%;
height: 1px;
background-color: #ccc;
}
.accordion li .accordion_icon span:nth-of-type(1) {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.accordion li .accordion_icon span:nth-of-type(2) {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.accordion li .accordion_icon.active span:nth-of-type(1) {
display:none;
}
.accordion li .accordion_icon.active span:nth-of-type(2) {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
今回の目玉、cssです。
基本的にはコピペで使用いただけます。
その上でフォントサイズの調整や余白、アイコンの大きさ等は好みに合わせて変更してください。
39行目で＋−アイコンの大きさ、位置を調整しています。
ここはフォントサイズなどベース設定とか変わってくるので調整が必要だと思います。
36行目のtransitionの値を変えれば＋から−へ変化するアニメーションのスピードを変更できます。
お好みでどうぞ。
＋ ↔ − へアイコンが変わるアコーディオンの紹介でした。
今回の実装にあたり下記のサイト様を参考にさせていただきました。
