簡単導入スライドjavascript「jquery.toggleElements.js」

既存のサイトに折りたたみ式のスライドを採用したいと思う人は多いでしょう。
しかし、導入にあたっては多くの障壁があるのが現状でしょう。
jquery.toggleElements.jsでは手間無く導入できてしまいます。

使用方法

jquery.toggleElements.jsからjquery.toggleElements.js、toggleElements.cssをjQueryからjquery.jsをダウンロードします。

<link rel="stylesheet" href="http://yourdomain/toggleElements.css" style="text/css">
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.toggleElements.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ 
    $('.class名など').toggleElements();
}); 
</script>

上記を記述したら、要素にclassをtitleにタイトルを付与すれば完成です。

<div class="class名" title="スライドタイトル">
	コンテンツ
</div>

オプション

fxAnimation：slide,show,fade
fxSpeed：fast,nomal,slow

＊toggleElements.cssで画像4点を指定していますので、適宜変更してください。
togglerc.gif、togglerch.gif、togglero.gif、toggleroh.gif

サンプル

{ fxAnimation:'slide', fxSpeed:'slow', className:'toggler' } );

{ fxAnimation:'show', fxSpeed:'fast', className:'toggler' } );

{ fxAnimation:'fade', fxSpeed:'nomal', className:'toggler'} );

Javascriptサンプルページ一覧

skuare.net