CSSが得意な渋谷のウェブデザイナーのウェブ開発メモ

[PR] Another American Dictionary Spanglish with us!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQuery トグル開閉

開閉ボタン

Lorem ipsum dolor sit amet, saepe impetus malorum eum in, mei cu tale reprimique. Est equidem vituperata ei. Vel alienum urbanitas ad. At omnis velit sed.

Ex prima brute veritus cum, nec no periculis referrentur. Ei legendos honestatis dissentiet his, eligendi dissentiunt ut pro. Molestiae intellegat ei eam, ferri ceteros sit ei, mea ne ferri signiferumque. In nominavi mandamus has, eu assentior efficiantur vel. Ut paulo consetetur nam, nec ex errem disputationi.

Quis graece aperiam in quo. Duo odio dolorem ei, molestiae definiebas ea sea, usu vidit tempor cu. No vim officiis accusata moderatius, enim zril qui te, ea sed congue vulputate. Quo ex eros feugait. Timeam delicata quaerendum et nam, quo ad illum expetenda imperdiet. Quot senserit cotidieque usu et, ne pri graeci impetus facilisi, ea nam corpora omittantur.

Vix putent vituperatoribus et, at semper feugait sapientem quo, ea mei ridens vocent appetere. Veri dictas inciderint his ad. Stet deleniti eu sed, te his homero deseruisse. Verear feugiat officiis pro ad, eos ei quot quidam, verear appetere vel cu. No quo sapientem ocurreret reprehendunt.

Vel cu legere deserunt, idque aeque epicurei mea id, stet veritus definitionem te sit. Ut essent mediocrem ius. Eos et placerat liberavisse, ponderum intellegam eos ut. Invidunt quaestio adipiscing sit ex, est case eruditi fabulas at. Vero graeco cu sed.

javascript

スピードは5行目数字で調節

<script type="text/javascript">
$(function(){
	$("div.triger").click(function(){
		$(this).toggleClass('on');// ←class="on"を追加/削除
		$(this).next("div.togglecontent").slideToggle(90);// トグル表示/非表示
	});
});
</script>

HTML

<div class="triger">開閉ボタン</div>
<div class="togglecontent">開閉の中身</div>

CSS

ページロード時に非表示するためのCSS。javascript でもできるがjsの読み込みが遅いとロード時に一瞬表示されてしまうのでCSSで処理する。

.togglecontent{
	display: none;
}
関連記事
この記事役にたった?
管理者にだけメッセージを送る

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。