今回作るのはディレクトリを図にしたときにフォルダ名の横によくあるあの三角です。Typing betaにあるものが完成品です。 ※エイプリールフールですが嘘は入っていません。
作り方
まず消したり表示したりするエリアを確保します。<div>消えるよー</div>としましょう。扱いやすいようにクラスを振っておきます。kieruyo にしましょう。ここで消えるよーを div でもう一度囲みます。そうしないと三角だけ残すのが難しいです。この辺がいつもごり押ししてるようであまり好きじゃないです。
次に▽を書きます。三角はさっきのエリアに入れてください。コードは<div>▽</div>です。再利用しやすいように三角にクラスをふっておきます。とりあえず sankaku でいきます。ここまでのコードは下に。
<div class="kieruyo"><div>消えるよー</div><div class="sankaku">▽</div></div>
ではcssを書いていきます。その前に消えるよーを消す方法を決めます。これはhiddenクラスを追加して消すにしましょう。では書いていきます。まず消えるよーの部分です。
.kieruyo{ position:relative;/*三角が位置ずれしないために必要*/ /*この要素にはoverflow:hiddenを設定しないでください。三角が消えます*/ } .kieruyo.hidden{ height:0; padding:0; border:0; } .kieruyo.hidden div{ display:none; }
必要に応じてかえてくださいね。では次に三角・エリアが表示されているバージョンです。
.sankaku{ position:absolute; height:20px;/*ここが重要です。ここがないと位置がずれます*/ }
最後に三角・エリアが非表示バージョンです。
.kieruyo.hidden .sankaku{/*この辺は若干cssのレベルの関係でセレクタを調整しています。もしいじっていて変になったら!importantをつけてみてください*/ top:-20px; display:block; }
これであとはjavascriptを書いて完成です。javascriptは簡単に書きます。といいたいところですがclassで要素をしぼれないのでjQueryを使います。たった5行にjQuery使うのもどうかと思うのですが…改善策あるひとは教えてください。
$(function(){ $(".sankaku").on("click",function(){ $(this).parent().toggleClass("hidden"); }); });
サンプル
(この記事では<style>を<body>に中で使うなど若干行儀の悪い書き方をしています。でも<head>個別指定できないのでご了承ください)
消えるよー
▽
