Jqueryで作るシンプル アコーディオン リスト メニュー

acoordion

アコーディオン型リスト サンプル

ういーんって開くヤツにしてよとか頼まれたり、ブログの項目が増えてくるとやりたくなる時ってあるあるですよね。
スマートフォンサイト全盛のいまならなおさら。

いつのころからかアコーディオン型リストと呼んでいます。

プログラムは人によっていろいろなやり方があると思いますが、できるだけシンプルなのをメモメモ。

jquery読み込み呼び出しで隠してから、.slideToggleを使ってみてます。 普通の.toggleも以前は使われていましたが、jQuery 1.9にて削除されてしまったようです。

他にもトグル系イベントとしては.slideToggleのほかに.fadeToggle、toggleClassもあります。

Jquery
  $(document).ready(function(){
    $(".list").hide();
    $("h3").click(function () {
      $(".list").slideToggle();
    });
  });

※もちろんJqueryが必要です。呼んでください。

HTML
<div class="slidetoggle">
<h3>アコーディオン</h3>
<ul class="list">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</div>
ついでにリストのシマシマCSS
.list li:nth-child(even) {background-color:#ddd;}
.list li:nth-child(odd) {background-color:#eee;}

フォームに入力した文字を自動で置き換え

formautochange

$(function() {
$('input').change(function(){
var txt  = $(this).val();
var han = txt.replace(/[A-Za-z0-9]/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)});
$(this).val(han);
});
});

フォームを作成時全角だと都合が悪いときによく使うのでメモ。
.changeでほかにもいろいろとできそうです。

SAMPLE

レスポンシブデザインでセンターよせ幅割り付けCSS

equalautowide

CSSでのコーディングで左右均等に割り付けレイアウトってどうやってますか?

以前はfloatなどを使って数値入力をして空白をとったりしていたのですが、最近は下記のやり方で落ち着きました。

ul{text-align:center;width:100%;display:table;table-layout:fixed;}
li{display:table;}

リストタグでなくてもできますが、リスト構造の場面で使うことが多いように感じます。

レスポンシブではblockにしてやると通常のリストに戻すことができます。