【jQuery】開閉するボックスを作る

jQuery

ボタンをクリックすると、隠されたボックスの表示/非表示を切り替えます。CSSプロパティを操作するごく基本的なスクリプトですが、表示するボックスのデザインは自由にカスタマイズできます。場所をとらず、コンテンツをコンパクトに表示できるため、PCにもスマートフォンにも適しています。スクリプトも簡単です。

サンプル

See the Pen VKYZRL by kajico (@kajilabo) on CodePen.

設置方法

1. jQueryを読み込む

HTMLファイルの<head>~</head>内に下記を記述します。

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function(){
    $('.more').click(function(){
        $('.hide_box')
       .slideToggle();
    });
});
</script>

もしくは、<head>~</head>内に

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="js/custom.js"></script>

と記述し、外部の任意のjsファイルに、

$(function(){
    $('.more').click(function(){
       $('.hide_box')
       .slideToggle();
    });
});

を追記する。

2. HTMLファイルに書き込む

HTMLファイルのタブメニューを設置したい部分に書き込みます。

<div class="box">
  <p>あいうえお</p>
  <p>かきくけこ</p>
  <p>さしすせそ</p>
<div class="hide_box">
  <p>たちつてと</p>
  <p>なにぬねの</p>
  <p>はひふへほ</p>
</div>
 <p class="more">MORE</p>
</div>

3. cssファイルに書き込む

cssファイルに記述します。

.box {
  color: #fff;
  background-color: #09c;
  width: 80%;
  padding: 10px;
  margin-right: auto;
  margin-left: auto;
}
.hide_box {
  display: none;
}
.more {
  width: 80px;
  height: 48px;
  border-radius: 40px;
  cursor: pointer;
  font-size: 14px;
  color: #FFF;
  background-color: #333;
  text-align: center;
  float: right;
  padding-top: 32px;
  margin-right: 20px;
  margin-top: -30px;
}

カスタマイズ

アニメーションの演出を変える

開閉スピードを変更することができます。slideToggle() は特にパラメータを指定しなくてもアニメーションしますが、パラメータを指定することもできます。()内のパラメータとして’slow’、’fast’、もしくはミリセカンド(1/1000秒単位)の数値を指定することができます。

       .slideToggle('slow'); //遅い
       .slideToggle('fast'); //早い
       .slideToggle(400); //ミリセカンドの数値を指定

コメント

タイトルとURLをコピーしました