以下のサイトでアコーディオンメニューを作成したのですが、アコーディオンが開いた状態で始まります。
https://qiita.com/MakotoIshikawa/items/f3a33d3aef0013a8fff9
<style> .ms-webpart-chrome h2 { position: relative; margin: 0 0 4px; padding: 0.8em 0 0.8em 1.5em; border: 2px solid #993366; font-size: 1.143em; font-weight: bold; background-color: #FFEEFF; } .ms-webpart-chrome h2:before { content: ""; position: absolute; background: #882255; top: 50%; left: 0.5em; margin-top: -15px; height: 30px; width: 8px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .ms-webpart-chrome h2:after { display: block; content: ""; position: absolute; top: 50%; right: 10px; width: 7px; height: 7px; margin-top: -4px; border-top: solid 2px #7f7f7f; border-right: solid 2px #7f7f7f; transform: rotate(135deg); -webkit-transform: rotate(135deg); transition: .2s; } .ms-webpart-chrome .closed h2:after { transform: rotate(45deg); -webkit-transform: rotate(45deg); } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> (function ($) { $.fn.extend({ BodyToggle: function (speed) { $(this).toggleClass('closed'); $(this).next().slideToggle(speed); }, }); $('.ms-webpart-chrome-title').click(function () { $(this).BodyToggle('normal'); }); })(jQuery); </script>
上記を[スクリプト エディター] の [スニペットを編集] で挿入しました。
閉じた状態で始まるようにするにはどうすればよいでしょうか?
やったこと
<scrip>以下が理解できていませんが、下記を試してみました。。
1.$入れ変え
$('.ms-webpart-chrome-title').click(function () {
$(this).BodyToggle('normal');
});
$.fn.extend({
BodyToggle: function (speed) {
$(this).toggleClass('closed');
$(this).next().slideToggle(speed);
},
});
2. closedとnormalの入れ替え
$.fn.extend({
BodyToggle: function (speed) {
$(this).toggleClass('normal');
$(this).next().slideToggle(speed);
},
});
$('.ms-webpart-chrome-title').click(function () {
$(this).BodyToggle('closed');
});