teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

ついき

2019/12/03 00:14

投稿

yambejp
yambejp

スコア117946

answer CHANGED
@@ -22,4 +22,31 @@
22
22
  いいい
23
23
  </p>
24
24
  </div>
25
+ ```
26
+
27
+ # 最初非表示
28
+ ```javascript
29
+ <script>
30
+ $(function(){
31
+ $('.toggle-box').hide();
32
+ $('a[data-target]').on('click',function(e){
33
+ e.preventDefault();
34
+ $('.toggle-box').filter('.'+$(this).data('target')).slideToggle('slow');
35
+ $('.toggle-box').not('.'+$(this).data('target')).slideUp('slow');
36
+ });
37
+ });
38
+ </script>
39
+ <a href="#" data-target="a1">あああ</a>
40
+ <a href="#" data-target="a2">いいい</a>
41
+
42
+ <div class="toggle-box a1">
43
+ <p>
44
+ あああ
45
+ </p>
46
+ </div>
47
+ <div class="toggle-box a2">
48
+ <p>
49
+ いいい
50
+ </p>
51
+ </div>
25
52
  ```