HTML、CSSで作成したアコーディオンの順番を入れ替える

前提・実現したいこと

アコーディオンメニューを開くためにクリックした場合に一番上に持ってきたい

発生している問題・エラーメッセージ

アコーディオンの何を一番上に持ってくるのかそもそもわからない
今回のコードであれば要素を一番上に持ってくる？それとも内容ごと書き換える？

HTML
1<div class="accbox">
2  <!--ラベル1-->
3    <label for="label1">クリックして表示1</label>
4    <input type="checkbox" id="label1" class="cssacc" />
5    <div class="accshow">
6      <!--ここに隠す中身-->
7      <p>
8        こんにちは1
9      </p>
10    </div>
11    <!--//ラベル1-->
12  <!--ラベル2-->
13    <label for="label2">クリックして表示2</label>
14    <input type="checkbox" id="label2" class="cssacc" />
15    <div class="accshow">
16      <!--ここに隠す中身-->
17      <p>
18        こんにちは2
19      </p>
20    </div>
21    <!--//ラベル2-->
22  <!--ラベル3-->
23    <label for="label3">クリックして表示3</label>
24    <input type="checkbox" id="label3" class="cssacc" />
25    <div class="accshow">
26      <!--ここに隠す中身-->
27      <p>
28        こんにちは3
29      </p>
30    </div>
31    <!--//ラベル3-->
32  <!--ラベル4-->
33    <label for="label4">クリックして表示4</label>
34    <input type="checkbox" id="label4" class="cssacc" />
35    <div class="accshow">
36      <!--ここに隠す中身-->
37      <p>
38        こんにちは4
39      </p>
40    </div>
41    <!--//ラベル4-->
42</div><!--//.accbox-->
43 <script>
44        var hash = location.hash;
45        if (hash === "#num1") {
46            var element = document.getElementById("label1");
47            element.checked = true;
48        } else if (hash === "#num2") {
49            var element = document.getElementById("label2");
50            element.checked = true;
51        } else if(hash === "#num3") {
52            var element = document.getElementById("label3");
53            element.checked = true;
54        } 
55        else if(hash === "#num4") {
56            var element = document.getElementById("label4");
57            element.checked = true;
58        }
59    </script>
60<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
61<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
62<script>
63$(function() {
64	// テーブルの行の並び替え
65	$('#num1').sortable({
66		opacity: 0.5,
67		placeholder: "ph1",
68	});
69	// リストの行の並び替え
70	$('#num2').sortable({
71		cursor: "move",
72		opacity: 0.7,
73		placeholder: "ph1",
74	});
75});
76</script>
77

CSS
1/*ボックス全体*/
2.accbox {
3    margin: 2em 0;
4    padding: 0;
5    max-width: 400px;/*最大幅*/
6}
7
8/*ラベル*/
9.accbox label {
10    display: block;
11    margin: 1.5px 0;
12    padding : 11px 12px;
13    color :#2f8fcf;
14    font-weight: bold;
15    background :#a4cbf3;
16    cursor :pointer;
17    transition: all 0.5s;
18}
19
20/*ラベルホバー時*/
21.accbox label:hover {
22    background :#85baef;
23}
24
25/*チェックは隠す*/
26.accbox input {
27    display: none;
28}
29
30/*中身を非表示にしておく*/
31.accbox .accshow {
32    height: 0;
33    padding: 0;
34    overflow: hidden;
35    opacity: 0;
36    transition: 0.8s;
37}
38
39/*クリックで中身表示*/
40.cssacc:checked + .accshow {
41    height: auto;
42    padding: 5px;
43    background: #eaeaea;
44    opacity: 1;
45}

試したこと

この記述だとcheckboxを使ってチェックされたときにaccをshowしているということはわかりました。
さらに、別のページから飛んできたときに、指定されたアコーディオンを開くように改造もしています。
(方法としてはhttp//×××.html#num1)
のようにURLの語尾にID名を付けるという単純なものです。
これのおかげで要素を開くための仕組みを理解しました。

その後ドラッグして順番を変えるコードを読んで同じようにchecked + .accshowの部分に順番を変えるプログラムを書きました。
しかしどうやってもうまくいきません。
ちなみに参考にしたアコーディオンをそのまま張り付けていますが実際は中身を変えています。
ただPタグの中を変更しているだけなので特に影響がないと判断しています。

アコーディオン、HTML、CSSをあまり扱ったことがなく間違った知識等あると思いますがご了承ください。
参考サイトのリンクを張り付けておきます。

アコーディオン
https://saruwakakun.com/html-css/reference/accordion
順番を入れ替える
https://itsakura.com/jquery-ui-sortable

補足情報（FW/ツールのバージョンなど）

Lhankor_Mhy

2020/11/30 07:46

ご提示のコードに「ドラッグして順番を変えるコードを読んで同じようにchecked + .accshowの部分に順番を変えるプログラム」が含まれていないように感じました。

Lhankor_Mhy

2020/11/30 07:48

また、「クリックした場合に一番上に持ってきたい」とのことですが、一番上に持っていくのは何ですか？　「クリックして表示1」と「こんにちは1」という理解で合っていますか？

Lhankor_Mhy

2020/11/30 07:50

五月雨式ですみません。 HTMLは変更していいのでしょうか？

snowdropAPP

2020/11/30 07:50

@Lhankor_Mhy様提示しているコードには含んでおりません。理由としてはドラッグして順番を変えるコードがこの質問の答えとして導けるのかあいまいである、さらにコピペして貼り付けて自分でコードを変えていたらよくわからないコードに移り変わっていたので混乱を招くかと思いました。もし必要であればコードを張り付けようかと思います。

snowdropAPP

2020/11/30 07:53

HTMLの変更も大丈夫です。ラベル単位で切り替えたいという感じです。いまラベルが4つ存在しています。「クリックして表示3」を押すと「クリックして表示1」の上にくる。ラベルの順番が変更されます。わかりにくくて申し訳ございません。

snowdropAPP

2020/11/30 07:58

コード変更しました。いろいろ試しましたが一番可能性のありそうなコードを張り付けています。

Lhankor_Mhy

2020/11/30 08:01

「クリックして表示3」「クリックして表示1」「クリックして表示3」「クリックして表示2」「クリックして表示3」の順で押した時の想定表示順を教えてください。

snowdropAPP

2020/11/30 08:11

「クリックして表示3」押下 3、1、2、4、「クリックして表示1」押下 1、3、2、4 「クリックして表示3」押下 3、1、2、4 「クリックして表示2」押下 2、3、1、4 「クリックして表示3」押下 3、2、1、4 です、押下されたアコーディオンが一番上、以下要素は据え置きという感じです。特にこだわりはありませんので常に下は1、2、3、4の順番で押下された数字が一番上にくる。でも構いません。「クリックして表示1を押下」 1,2,3,4 「クリックして表示2を押下」 2,1,3,4 「クリックして表示3を押下」 3,1,2,4 「クリックして表示4を押下」 4,1,2,3 的な感じでも大丈夫です。

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

回答1件

ベストアンサー

こんばんは。

すみません、HTMLを思いっきり改変してしまったので、他との整合で問題が出るかもしれません。

サンプル

html
1<div class="accbox">
2  <!--ラベル1-->
3  <input type="checkbox" id="label1" class="cssacc" />
4  <label for="label1">クリックして表示1
5  <div class="accshow">
6    <!--ここに隠す中身-->
7    <p>
8      こんにちは1
9    </p>
10  </div></label>
11  <!--//ラベル1-->
12  <!--ラベル2-->
13  <input type="checkbox" id="label2" class="cssacc" />
14  <label for="label2">クリックして表示2
15  <div class="accshow">
16    <!--ここに隠す中身-->
17    <p>
18      こんにちは2
19    </p>
20  </div></label>
21  <!--//ラベル2-->
22  <!--ラベル3-->
23  <input type="checkbox" id="label3" class="cssacc" />
24  <label for="label3">クリックして表示3
25  <div class="accshow">
26    <!--ここに隠す中身-->
27    <p>
28      こんにちは3
29    </p>
30  </div></label>
31  <!--//ラベル3-->
32  <!--ラベル4-->
33  <input type="checkbox" id="label4" class="cssacc" />
34  <label for="label4">クリックして表示4
35  <div class="accshow">
36    <!--ここに隠す中身-->
37    <p>
38      こんにちは4
39    </p>
40  </div></label>
41  <!--//ラベル4-->
42</div>
43<!--//.accbox-->

css
1/*ボックス全体*/
2.accbox {
3    margin: 2em 0;
4    padding: 0;
5    max-width: 400px;/*最大幅*/
6    display: flex; /* 追加 */
7    flex-flow: wrap; /* 追加 */
8}
9
10/*ラベル*/
11.accbox label {
12    width: 100%; /* 追加 */
13    display: block;
14    margin: 1.5px 0;
15    padding : 11px 12px;
16    color :#2f8fcf;
17    font-weight: bold;
18    background :#a4cbf3;
19    cursor :pointer;
20    transition: all 0.5s;
21}
22
23.cssacc:checked + label{ /* 追加 */
24    order: -1;
25}
26
27.cssacc:checked + label.active{ /* 追加 */
28    order: -2;
29}

js
1$('label').on('click', function(){
2  $('label').removeClass('active');
3  $(this).addClass('active');
4});

投稿2020/11/30 08:31

Lhankor_Mhy

総合スコア36960

snowdropAPP

2020/12/01 02:32

こんにちは、ご回答丁寧にありがとうございます。ラベルを閉じる場所が変わっていて初めは不思議に思っていましたが、ラベルで囲わないと中身の要素毎順番を入れ替えられないのかと気づきました。ラベルをもし閉じたとして、中身のdivに対して同じように順番を入れ替えるような処理を記述したら同じように動きそうだなと感じました。何度か失敗しましたが、サンプルのリンクも張られていたので修正自体に時間はかからず非常にわかりやすかったです。おかげさまで実行できました。ありがとうございます！

Lhankor_Mhy

2020/12/01 02:51

ああ、たしかにそうですね。素直にdivで囲めばよかったですね。ご解決されて何よりでした。

snowdropAPP

2020/12/01 05:05

あともう一つなのですが、「ラベル3を表示」した場合に画面もトップに移動するような処理を作成する場合、どうしたらいいでしょうか... ページトップに戻るボタンを右下にくっつけているのですが、おそらく処理が違うのかなと感じました。理由としては、トップページに戻るだけなら押したときトップに戻ればいいのですが、この場合だとactiveになったときという判断になると思っています。しかし、javascriptでどういう風に書いたらいいのかわかりませんので何かヒント等あればお願いいたします。

Lhankor_Mhy

2020/12/01 06:44

ページの一番上に戻すだけなら、 $(window).scrollTop(0) でいいと思います。ただ、アニメーションをしてるので、スクロールアンカリングに気を付ける必要があるかと思います。 https://developer.mozilla.org/ja/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring

snowdropAPP

2020/12/01 07:08

なるほどですねこちらの方も参考にして実行してみたいと思います自分なりにコードを書いてうまくいったので一応貼っておきます <script type="text/javascript"> $('label').on('click', function() { $('label').removeClass('active'); $(this).addClass('active'); }); $('.cssacc').on('change', function() { if (this.checked) { location.href = "#"; } }); </script> あまりjavascriptを触ったことがなかったので苦労しましたがなんとかできました！

Lhankor_Mhy

2020/12/01 07:25

なるほど、changeイベントを使うのは思いつきませんでした。お疲れ様でした。

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