*

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

公開日: : 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

-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法

今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。 スクロールしたら

記事を読む

no image

htmlの書き方について。

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

記事を読む

no image

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

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

記事を読む

no image

animationでboxを動かしてみた。

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

記事を読む

no image

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

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

記事を読む

-jQuery-送信ボタン1度しか押せないようにする方法

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ

記事を読む

no image

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

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

記事を読む

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

no image

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑