質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
SharePoint

SharePointは、マイクロソフトにより開発された、ソフトウェア開発のドキュメント管理やコラボレーションを行うプラットフォームの総称です

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

2180閲覧

トグルで最初は閉じた状態にしたい

TETSUYAMAGUCHI

総合スコア0

SharePoint

SharePointは、マイクロソフトにより開発された、ソフトウェア開発のドキュメント管理やコラボレーションを行うプラットフォームの総称です

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/07/24 16:55

編集2020/07/25 23:52

以下のサイトでアコーディオンメニューを作成したのですが、アコーディオンが開いた状態で始まります。

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');
});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/07/24 23:04

まず自身のコードを提示し、要件に対して調べたこと試したことを記載してください
m.ts10806

2020/07/24 23:06

それに提示の記事のコードがある程度理解できていればどうすればできるかは明白かと思います
guest

回答1

0

詳細分かりませんが、大雑把な対策としては下記です。

  • リロード時に非表示にしたい要素にcssでdisplay: noneを適用しておく
  • リロード時に発火するファンクションを用意して、そのファンクション上でtoggleを呼び出す

前者で試して、無理なら後者で妥協といった形です。

投稿2020/08/05 12:47

shota-imoto

総合スコア37

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問