【jQuery】divブロック要素をスライド開閉させる｜jQuery

2025/10/25 Sat.

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

現在、新しいコメントを受け付けない設定になっています。

【jQuery】divブロック要素をスライド開閉させる

サムライファクトリーのDesigner 其の六です。

jQueryで、
divブロック要素をスライド開閉させるのを探してたのですが
閉じるのはあったが開くのを説明しているサイトが中々みつからず
ちょっと手を加えてみたので記載しておこうと思います。
※いたらない点、もっとこうしたら良いのではという
のがございましたらご連絡下さいm_ _m

サンプルとソースの詳細を見る

■サンプルはコチラ
http://ndblog.sdbx.jp/jqsample/
※右下の×ボタンくクリックすると
　下の黒いブロックが消えます。

■ソースはコチラ

□jQuery
"slideToggle"使用
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
※どのバージョンから対応してるかは確認してません

$(function(){
    $(".item_view_close").click(function(){
        $(".item_view").slideToggle(300);
	$(".item_view_open").slideDown(600);
    });
    $(".item_view_open").click(function(){
        $(".item_view_open").slideToggle(300);
	$(".item_view").slideDown(600);
     }); 
});

※ちょっと説明
.item_view_close（×画像）
をクリックした時に.item_view（黒いブロック）が
下にスライドしながら非表示しながら
.item_view_open（△画像）が表示される。
（上にしたい時は）

□html

<body>
メイン画面

<div class="item_view">
<p class="item_view_close"></p>
<p>黒ブロック</p>
</div>

<div class="item_view_open"></div>

</body>

□css

body{
	margin:0;
	padding:30px 0 0;
	text-align:center;
}
.item_view{
	position:fixed;
	bottom:0;
	width:100%;
	background:rgba(0,0,0,0.75);
	z-index:99;
}
.item_view p{
	text-align:center;
	color:#FFF;
	font-size:10px;
	line-height:1.1;
	padding:10px 10px 5px 0;
}
.item_view_open{
	background:url(icon.png) 0 -100px no-repeat;
	width:14px;
	height:14px;
	position: fixed;
	right:10px;
	bottom:-1px;
	z-index:1;
	display:none;
}
.item_view_close{
	background:url(icon.png) 0 -217px no-repeat;
	width:14px;
	height:14px;
	position:absolute;
	right:0px;
	top:5px;
}
.item_view_open:hover, .item_view_close:hover{
	filter:alpha(opacity=65);
 -moz-opacity:0.65;
 -khtml-opacity: 0.65;
 opacity:0.65;
}

[0回]