【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); //ミリセカンドの数値を指定


関連記事

【jQuery】サムネイルをクリックするとメイン画像が切り替わる

サムネイルをクリックすると、上の大きい画像がサムネイルの画像と切り替わるようにします。 サンプル ...

記事を読む

【jQueryプラグイン】FractionSlider:スライダー内の画像やテキストなどの要素に、さまざまな動きをつける

FractionSlider FractionSlider デモ   j...

記事を読む

【jQuery】プラグインなしで縦型のドロップダウンメニューを作る

jQueryのプラグインを使わない縦型のドロップダウンメニューの作り方です。CSSを変更すれば、...

記事を読む

【jQuery】プラグインなしでコンテンツを切り替えるタブメニューを作る

並んだタブをクリックすると、そのすぐ下のボックス内のコンテンツが切り替わります。タブはスマートフ...

記事を読む

【jQuery】プラグインなしで縦型のドロップダウンメニューを作る(現在の位置のメニューを開けた状態にする)

『【jQuery】プラグインなしで縦型のドロップダウンメニューを作る』で作ったドロップダウンメニ...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

no image
結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方  受付でお祝いの言葉を述べ、祝儀

no image
結婚祝い

お祝い品選びと費用 お祝い品の選び方  新居を構える二人には、生活

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑