トグル要素をページ時読み込み時に一瞬だけ表示したい

トグル要素をページ時読み込み時に一瞬だけ表示したいです。

具体的には以下のように、「hoge_parent」直下の「trigger」のクリックをトリガーとして「togglearea」をトグル開閉したいです。
さらに、開いている時には「trigger」に「active」というclassを付与したいです。

■閉じている状態

lang
1<div class="hoge_parent">
2    <div class="togglearea">
3	閉じている状態
4    </div>
5	<span class="trigger">トリガー</span>
6</div>

■開いている状態

lang
1<div class="hoge_parent">
2    <div class="togglearea">
3	開いている状態
4    </div>
5	<span class="trigger active">トリガー</span>
6</div> 
7

ご質問内容はこのトグルの実装方法と、ページ読み込み時に2秒だけ開いている状態にし、それから閉じたいです。
当該エリアがトグル要素であるということを認知させるためです。

ご教授の程よろしくお願いいたします。

行動規範の内容に同意します

回答2件

html
1<!DOCTYPE HTML>
2<html lang="ja-JP">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			.togglearea {
8				height: 300px;
9				display: none;
10			}
11			.togglearea.display {
12				display: block;
13			}
14		</style>
15	</head>
16	<body>
17		<div class="hoge_parent">
18			<div class="togglearea display">
19				閉じている状態
20			</div>
21			<span class="trigger">トリガー</span>
22		</div>
23		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
24		<script type="text/javascript">
25			$(function () {
26				$(".trigger").on('click', function () {
27					$(".togglearea").toggleClass("display");
28					if ($(".togglearea").hasClass('display')) {
29						$(this).addClass("active");
30					} else {
31						$(this).removeClass("active");
32					}
33				});
34			}).delay(2000).queue(function () {
35				$(".trigger").click();
36			});
37		</script>
38	</body>
39</html>

投稿2015/11/07 17:33

退会済みユーザー

総合スコア0

castail

2015/11/08 05:50

ご回答ありがとうございます。せっかくご回答頂いたのに恐縮ですが、今回は先にご回答頂いた「hatena19」さんをベストアンサーとさせて頂きます。

行動規範の内容に同意します

ベストアンサー

setTimeout を使って実行を遅らせればいいでしょう。

html は開いている状態で記述しておきます。

html
1<div class="hoge_parent">
2    <div class="togglearea">
3    開いている状態
4    </div>
5    <span class="trigger active">トリガー</span>
6</div>

setTimeoutで２秒後にトリガーをクリックする

javascript
1$(".hoge_parent .trigger").click(function () {
2  $(this).toggleClass("active");
3  $(".hoge_parent .togglearea").toggle();
4});
5$(function(){
6  setTimeout(function(){
7    $(".hoge_parent .trigger").trigger("click");
8  },2000);
9});