*

テキストがアコーディオンのように開く。

公開日: : css3, html5, jquery

今回は、テキストをアコーディオンのように開く方法について調べてみました。

ページが読み込まれたときに、なんかアクションが欲しいと思いませんか?

だた、派手なアクションよりもさりげない方がいい時には、使えるのでは、ないでしょうか?

まずは、デモを見てください。
デモ01

以下にソースを記載します。
今回使用する、スタイルシートは、
index.css
以上の1つです。

scriptは、
cos.js
以上の1つを使用します。

以下がindex.htmlのファイルです。
index.htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<title>テキストがアコーディオンのように開く。</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css" />

</head>
<body>





<div id="wrp">
<div id="concept_wrap">テキストがアコーディオンのように開きます。<br>テキストがアコーディオンのように開きます。<br>テキストがアコーディオンのように開きます。<br>テキストがアコーディオンのように開きます。</div>
</div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/cos.js"></script>
</body>
</html>

次に、スタイルシートです。
index.css

@charset "UTF-8";
/* CSS Document */

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	font-size:12px;
	width: 100%;
	color:#ffffff;
}

#wrp {
	width:1000px;
	height:500px;
	background-color:rgba(0,0,0,0.7);
	margin:100px auto;
}

#concept_wrap {
	display:none;/* あとから開く際は、これが必要です。※意味がわからなかったら、display:none;を一回消してみてください。 */
        text-align:center;
        line-height: 50px;
}

最後にjsファイルです。
cos.js

$(function(){
      $("#concept_wrap").delay(1000).slideToggle(2500);
});

以上で完成です。

今回デモ01で使用したファイルをUPしときましたので、
よかったら参考にしてみてください。
ダウンロード

——————————————————————-
補足
cos.jsの説明です。
.delay(1000)=開くまでの時間
.slideToggle(2500)=開いてから完了するまでの時間

これで、微調整ができます。

index.cssについてですが、
#concept_wrapの中の
display:none;についてですが、
これを消せば。動きが逆になります。※消してみたらわかると思います。


関連記事

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

no image

jquryで問い合わせフォームのデザインを作ってみた。

今回は、jquryで問い合わせフォームを作ってみました。   問い合わせフォー

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

no image

-jQuery-自動で画像のフェードイン・フェードアウトをする方法

今回は、自動で画像を切り替える方法について調べてみました。 (フェイドイン・フェイドアウトのみ)

記事を読む

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

no image

簡単popupの設置方法。Pop Easyを設置してみました。

今回は、ポップアップ(popup)の設置に取り組んでみました。   ポップアッ

記事を読む

no image

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

Message

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

PAGE TOP ↑