タイトルをクリックするとスライドダウン表示されるスクリプトの無料ダウンロード

公開日

2019年6月20日

最終更新日

2021年10月25日

著者

Motohiro Tani

ページ内にあるタイトル(見出し)をクリックした際に、本文がスライドダウンで表示されるスクリプトを作りました。

ここではわかりやすいように「タイトル」と表記していますが、これはHTMLのtitleタグではなく、ページ上に表示させるh1とかh2とかの「見出し」を指しています。

しかし実際のところ、見出しに使うタグはh1やh2のようなhタグに限らず、pでもdivでもなんでも動作するようになっていますので、既存のページに柔軟に組み込みやすいのではないでしょうか。

名称は「スライドダウン・スクリプト」としておきます。
現在の最新バージョンは2019年6月20日公開の1.0です。
参考ページ：プログラムをアップデートするの際の思想について

各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

特長

• 既存のページに組み込むのが簡単。
• HTMLページにも組み込み可能。
• 設定用のファイルなし。サーバにアップロードするだけで動きます。
• いくつでも見出しやそれに付随する表示エリアを増やすことが可能。
• 表示エリアの中はテキストだけでなく画像や動画など、何を設置してもOK。
• デザインはすべてCSSで自由に変更可能です。

スライドダウンスクリプトのサンプルとダウンロード

スライドダウンスクリプトのサンプル
見出しの文字の大きさや色などはこのプログラムの動作に影響することなく、後から自由に変更できます。

スライドダウンスクリプトのダウンロード
無料でダウンロードできます。

使い方の説明(基本設置方法)

まず、動作確認のために以下の作業から順番に確認していくと間違いがないでしょう。

1、スライドダウンスクリプトをダウンロードし、展開する。

2、フォルダごとサーバにアップロードする。

3、ブラウザでindex.htmlにアクセスし、動作を確認する。

既存サイトへの組み込み方法

以下の作業は同梱のindex.htmlのソースからコピーしていくと間違いがないでしょう。

4、クリックできる見出しに対して「slide-down」というクラス名を付ける。
初期状態のindex.htmlでは以下のようにp要素になっていますが、これはh1やh2やdivなど、どんな要素でもOKです。

<p class="slide-down">スライド見出し1</p>

5、上記手順4の各見出しに対してdata-slideという属性を付ける。
この属性の値はslide-1、slide-2、slide-3というように、数字を順番にしてください。

<p class="slide-down" data-slide="slide-1">スライド見出し1</p>

<p class="slide-down" data-slide="slide-2">スライド見出し2</p>

6、見出しがクリックされた際に表示されるエリアのコードをページ内に追加する。
これはdiv要素である必要があります。
そしてクラス名には上記手順5でdata-slide属性に付けたslide-1、slide-2、slide-3という同じ名前にします。

<div class="slide-1">
ここに見出し1がクリックされた際に表示させる内容
</div>

<div class="slide-2">
ここに見出し2がクリックされた際に表示させる内容
</div>

上記コードのdivの中にはどのようなHTML要素を記入しても問題ありません。
この部分はこのプログラムの動作に影響しません。

画像を設置してもOKですし、ulやdlのようなリスト要素を設置してもOKですし、その気になれば当サイトで配布しているレスポンシブ・メールフォームのようなプログラムを組み込むことも可能です。

7、slide-down.cssを読み込ませる。
このslide-down.cssの設置場所はどこでも構いません。
サーバ上にすでにcssという名前のフォルダが存在しているのなら、その中に移動させても問題ありません。

<link rel="stylesheet" href="css/slide-down.css" />

7、jQuery本体とslide-down.jsを読み込ませる。
このslide-down.jsの設置場所もどこでも構いません。
サーバ上にすでにjsという名前のフォルダが存在しているのなら、その中に移動させても問題ありません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/slide-down.js"></script>

組み込み作業は以上です。
デザインを変更したりする前に、この時点で動作確認をしてみましょう。

見出しなどのデザインについて

見出しなどのデザインはすべてCSSで定義してあります。
初期状態のindex.htmlの中に記述されているCSSのコードは、既存サイトに組み込む場合は不要になると思います。

既存サイトに組み込む際に必要になるCSS、つまりこのプログラムの動作上必要になるCSSはslide-down.cssだけとなります。

この「スライドダウンスクリプト」は、CSSをどのように編集したとしても動作エラーの原因にはなりませんので、自由にCSSでデザインしてください。

プログラムファイル(JS)では、クリックされた見出しのdata-slideの名前に応じたdiv要素に対して表示・非表示の切り替えをするだけの仕組みになっています。

imageフォルダとその中にある画像について

初期状態ではimageという名前のフォルダがあり、その中に数枚の画像が格納されています。
これは既存サイトに組み込む際には不要ですので、フォルダごと削除しても問題ありません。

注意点

サポートに関して

カスタマイズに関して

ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。

アップデート履歴

2019/06/20　バージョン1.0

• 公開。