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

質問編集履歴

1

コードの記載とやったことの説明

2020/07/25 23:52

投稿

TETSUYAMAGUCHI
TETSUYAMAGUCHI

スコア0

title CHANGED
File without changes
body CHANGED
@@ -2,4 +2,89 @@
2
2
 
3
3
  https://qiita.com/MakotoIshikawa/items/f3a33d3aef0013a8fff9
4
4
 
5
+ ```
6
+ <style>
7
+ .ms-webpart-chrome h2 {
8
+ position: relative;
9
+ margin: 0 0 4px;
10
+ padding: 0.8em 0 0.8em 1.5em;
11
+ border: 2px solid #993366;
12
+ font-size: 1.143em;
13
+ font-weight: bold;
14
+ background-color: #FFEEFF;
15
+ }
16
+ .ms-webpart-chrome h2:before {
17
+ content: "";
18
+ position: absolute;
19
+ background: #882255;
20
+ top: 50%;
21
+ left: 0.5em;
22
+ margin-top: -15px;
23
+ height: 30px;
24
+ width: 8px;
25
+ border-radius: 2px;
26
+ -webkit-border-radius: 2px;
27
+ -moz-border-radius: 2px;
28
+ }
29
+ .ms-webpart-chrome h2:after {
30
+ display: block;
31
+ content: "";
32
+ position: absolute;
33
+ top: 50%;
34
+ right: 10px;
35
+ width: 7px;
36
+ height: 7px;
37
+ margin-top: -4px;
38
+ border-top: solid 2px #7f7f7f;
39
+ border-right: solid 2px #7f7f7f;
40
+ transform: rotate(135deg);
41
+ -webkit-transform: rotate(135deg);
42
+ transition: .2s;
43
+ }
44
+ .ms-webpart-chrome .closed h2:after {
45
+ transform: rotate(45deg);
46
+ -webkit-transform: rotate(45deg);
47
+ }
48
+ </style>
49
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
50
+ <script>
51
+ (function ($) {
52
+ $.fn.extend({
53
+ BodyToggle: function (speed) {
54
+ $(this).toggleClass('closed');
55
+ $(this).next().slideToggle(speed);
56
+ },
57
+ });
58
+ $('.ms-webpart-chrome-title').click(function () {
59
+ $(this).BodyToggle('normal');
60
+ });
61
+ })(jQuery);
62
+ </script>
63
+ ```
64
+ 上記を[スクリプト エディター] の [スニペットを編集] で挿入しました。
5
- 閉じた状態で始まるようにするにはどうすればよいでしょうか?
65
+ 閉じた状態で始まるようにするにはどうすればよいでしょうか?
66
+
67
+ やったこと
68
+  <scrip>以下が理解できていませんが、下記を試してみました。。
69
+
70
+ 1.$入れ変え
71
+ $('.ms-webpart-chrome-title').click(function () {
72
+ $(this).BodyToggle('normal');
73
+ });
74
+   $.fn.extend({
75
+ BodyToggle: function (speed) {
76
+ $(this).toggleClass('closed');
77
+ $(this).next().slideToggle(speed);
78
+ },
79
+ });
80
+
81
+ 2. closedとnormalの入れ替え
82
+ $.fn.extend({
83
+ BodyToggle: function (speed) {
84
+ $(this).toggleClass('normal');
85
+ $(this).next().slideToggle(speed);
86
+ },
87
+ });
88
+ $('.ms-webpart-chrome-title').click(function () {
89
+ $(this).BodyToggle('closed');
90
+ });