今回はCSS不要のアコーディオンをご紹介したいと思います。
超スピーディに出来上がりそのままコピペで使用できますので是非サイト作成に使用してみてはいかがでしょうか！
それでは解説していきたいと思います(*ﾟ▽ﾟ)ﾉ
クリックでアコーディオン！CSSの記述は一切なし！
1. headタグ内に以下3つのライブラリを追加（コピペ）します。
1 2 3 | <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> |
2. 以下のJQueryコードを記述（コピペ）して出来上がりです。
1 2 3 4 5 6 7 8 9 10 | <script> $(function() { $('.icon').accordion({ icons: { "header": "ui-icon-plusthick", //icon変更ココ "activeHeader": "ui-icon-minusthick" //icon変更ココ } }); }); </script> |
結果は下記のResultのような動きになります。
See the Pen XWdEvzd by tomoy777 (@tomboy777) on CodePen.
iconsのパラメーターを変更すれば+と－アイコンの変更も簡単にできます。
header→閉じてる時の+アイコン
activeHeader→開いてる時の–アイコン
アイコンの種類はこちら
https://api.jqueryui.com/theming/icons/
ホバーでアコーディオン！CSSの記述は一切なし！
1. headタグ内に以下3つのライブラリを追加（コピペ）します。
1 2 3 | <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> |
2. 以下のJQuerコードを記述（コピペ）して出来上がりです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <script> $(function() { $('.icon').accordion({ event : "click hoverintent",//////////追加////////// icons: { "header": "ui-icon-plusthick", //icon変更ココ "activeHeader": "ui-icon-minusthick" //icon変更ココ } }); }); ////////////////////////追加コピペでOK//////////////////////// var cfg = ($.hoverintent = { sensitivity: 7, interval: 50 }); $.event.special.hoverintent = { setup: function() { $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler ); }, teardown: function() { $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler ); }, handler: function( event ) { var that = this, args = arguments, target = $( event.target ), cX, cY, pX, pY; function track( event ) { cX = event.pageX; cY = event.pageY; }; pX = event.pageX; pY = event.pageY; function clear() { target .unbind( "mousemove", track ) .unbind( "mouseout", arguments.callee ); clearTimeout( timeout ); } function handler() { if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) { clear(); event.type = "hoverintent"; event.originalEvent = {}; jQuery.event.handle.apply( that, args ); } else { pX = cX; pY = cY; timeout = setTimeout( handler, cfg.interval ); } } var timeout = setTimeout( handler, cfg.interval ); target.mousemove( track ).mouseout( clear ); return true; } }; </script> |
結果は下記のResultのような動きになります。
（スマホやタブレットではわからないのでPCでマウスのカーソルを動かしてお試してください）
See the Pen mdPKOLv by tomoy777 (@tomboy777) on CodePen.
iconsのパラメーターを変更すれば+と－アイコンの変更も簡単にできます。
header→閉じてる時の+アイコン
activeHeader→開いてる時の–アイコン
アイコンの種類はこちら
https://api.jqueryui.com/theming/icons/
まとめ
通常アコーディオンを作成するのにtoggleClassなどで記述して、閉まったら開き、開いたら閉まるみたいな若干面倒な処理になりますが、今回のアコーディオンは全てコピペで作成でき見た目もそんなに悪くないので、お急ぎの方はこれで十分使用できると思いますし、どうしても見た目を変更したい時のみCSSで調整すればいいかと思います。
javascriptでこの動きにするのには、もっとコードが複雑になりますが、JQueryなら簡単なコードで実現できるのでとても便利ですヽ(^^)ﾉ
以上です。
