「一つ開けると他は閉じる」アコーディオンメニューに変更したいです。

アコーディオンメニューについて質問です。

いまの仕様が「開けたら開きっぱなし」のアコーディオンメニューなのですが、
「一つ開けると他は閉じる」仕様にしたいのです。
ワードプレスを使用していて、CSSとHTMLのみで構成されています。

◆試したこと
・functions.phpに下記を追加

	$('.acd-label').click(function(){
		$(this).toggleClass('selected');
		$(this).next().slideToggle();
	});
});

・javascript.jsに下記を追加

$(function(){
  $('.acd-labelr').click(function(){
    $(this).next('.acd-label').slideToggle();
    $(this).toggleClass("open");
    $('.acd-label').not($(this)).next('.acd-label').slideUp();
    $('.acd-label').not($(this)).removeClass("open");
  });
});

…上記を試しましたが、ダメでした。
ご助言、何卒よろしくお願い致します。

◆現状のHTMLはこちらです

    <title>Swell-Accordion</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">



<input id="acd-check1" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check1">03/01〈達成報告〉売上 前年比150％！</label>
<div class="acd-content">
<div class="block1"><p>
若手経営者塾「N109」のメンバーが、2023年2月度の売上で前年比150％を達成されました。おめでとうございます！
<br><br></p></div> </div>

<input id="acd-check2" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check2">02/01〈達成報告〉利益 前年比334％！</label>
<div class="acd-content">
<div class="block1"><p>
若手経営者塾「N109」のメンバーが、2023年1月度の利益で前年比334％を達成されました。おめでとうございます！
<br><br></p></div> </div>

<input id="acd-check3" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check3">01/08〈達成報告〉利益 前年比190％！</label>
<div class="acd-content">
<div class="block1"><p>
若手経営者塾「N109」のメンバーが、2022年12月度の利益で前年比190％を達成されました。おめでとうございます！
<br><br></p></div> </div>


    <input id="acd-check4" class="acd-check" type="checkbox">
    <label class="acd-label" for="acd-check4">12/27〈お客様の声〉最初はウソだと思ってた…</label>
    <div class="acd-content">
        <div class="block1"><p>
若手経営者塾「N109」のメンバーから「毎日が楽しくなるなんて、最初はウソだと思ってたけど、今年、本当に楽しかった」という嬉しいコメントをいただきました！<br>
<br></p></div></div>


    <input id="acd-check5" class="acd-check" type="checkbox">
    <label class="acd-label" for="acd-check5">12/01〈お客様の声〉ボーナス支給額アップ！</label>
    <div class="acd-content">
        <div class="block1"><p>
若手経営者塾「N109」のメンバーから、「冬季賞与の支給額をアップできました」という嬉しいコメントをいただきました！<br>
<br></p></div></div>

◆現状のCSSはこちらです

/************************************
アコーディオンメニュー
************************************/
/*アコーディオン全体*/
@charset "UTF-8";

.acd-check {
    display: none;
}

.acd-label {
    padding: 10px 15px;
    box-sizing: border-box;
    background: #F1F5F4;
    display: flex;
    justify-content: space-between;
    margin: 0 auto 5px;
    width: 60%;
	    border-bottom: 1px solid #313131;
}
.acd-label::after {
    display: flex;
    align-items: center;
    font-family: "Font Awesome 5 Free";
    content: "\f0d7";
    font-weight: 900;
    transition: all 0.3s;
}

.acd-content {
    height: 0;
    opacity: 0;
    transition: 0.3s;
    visibility: hidden;
    width: 60%;
    padding: 0;
    margin: 0 auto;
}
.acd-content p {
    margin: 0;
    padding: 0 20px;
    word-break: break-all;
}
.acd-check:checked + .acd-label + .acd-content {
    height: auto;
    opacity: 1;
    padding: 15px 0;
    visibility: visible;
    display: flex;
    align-items: center;
    word-break: break-all;
}

.acd-check:checked + .acd-label::after {
    transform: rotate(180deg);
}

@media screen and (max-width: 960px) {
    .acd-label {
        width: 95%;
    }
    .acd-content {
        width: 95%;
    }
    .acd-check:checked + .acd-label + .acd-content {
        padding: 10px 0;
    }
}

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

回答2件

「1つ開けると他は閉じる」は、現状のCSSを読む限り input.acd-check 要素において「1箇所チェックすると、他は未チェックの状態にしたい」という事かと思います。

同一のname属性を付与し、inputを type="radio" に変更するといったやり方でも1箇所のみチェックするという挙動の実現は可能です(ラジオボタン要素が1箇所しかチェックできない仕様を利用する)

html
1<input id="acd-check1" class="acd-check" name="acd-check" type="radio">
2<label class="acd-label" for="acd-check1">03/01〈達成報告〉売上 前年比150％！</label>
3<div class="acd-content">
4<div class="block1"><p>
5若手経営者塾「N109」のメンバーが、2023年2月度の売上で前年比150％を達成されました。おめでとうございます！
6<br><br></p></div> </div>
7
8<input id="acd-check2" class="acd-check" name="acd-check" type="radio">
9<label class="acd-label" for="acd-check2">02/01〈達成報告〉利益 前年比334％！</label>
10<div class="acd-content">
11<div class="block1"><p>
12若手経営者塾「N109」のメンバーが、2023年1月度の利益で前年比334％を達成されました。おめでとうございます！
13<br><br></p></div> </div>
14
15<input id="acd-check3" class="acd-check" name="acd-check" type="radio">
16<label class="acd-label" for="acd-check3">01/08〈達成報告〉利益 前年比190％！</label>
17<div class="acd-content">
18<div class="block1"><p>
19若手経営者塾「N109」のメンバーが、2022年12月度の利益で前年比190％を達成されました。おめでとうございます！
20<br><br></p></div> </div>
21
22
23    <input id="acd-check4" class="acd-check" name="acd-check" type="radio">
24    <label class="acd-label" for="acd-check4">12/27〈お客様の声〉最初はウソだと思ってた…</label>
25    <div class="acd-content">
26        <div class="block1"><p>
27若手経営者塾「N109」のメンバーから「毎日が楽しくなるなんて、最初はウソだと思ってたけど、今年、本当に楽しかった」という嬉しいコメントをいただきました！<br>
28<br></p></div></div>
29
30
31    <input id="acd-check5" class="acd-check" name="acd-check" type="radio">
32    <label class="acd-label" for="acd-check5">12/01〈お客様の声〉ボーナス支給額アップ！</label>
33    <div class="acd-content">
34        <div class="block1"><p>
35若手経営者塾「N109」のメンバーから、「冬季賞与の支給額をアップできました」という嬉しいコメントをいただきました！<br>
36<br></p></div></div>

投稿2023/03/31 16:22

Eggpan

総合スコア2729

ASA

2023/04/03 01:45

えっ…？！すごい！すごい！！こんなやり方があったのですね。分かりやすく、かつ丁寧に教えてくださってありがとうございます！ Eggpanさんのおかげでひとつ賢くなりました。本当にありがとうございます。

ASA

2023/04/03 01:57

ありゃ？でも、今度は開いたら、閉まらなくなりました。どれか一つは開きっぱなしの状態になってしまう…。

ASA

2023/04/03 02:03

す、すみません。もう一人の方の回答ですと、理想通りの「一つ開いたら一つ閉じる。」動作が出来たのでもう一人の方にベストアンサーさせて頂きます。けれど、Eggpanさんのおかげで、コードの書き方がひとつ理解できました。本当にありがとうございました。

Eggpan

2023/04/03 03:30

開きっぱなしということは、チェックが外れていないという状況かと思います。 input type="radio" にした項目の name属性が未設定か、JavaScriptなどの影響でチェックが外れている可能性があります。私の回答はJavaScriptを必要としないものになります。ベストアンサーは質問者にとって一番やくだったものにしていただければ良いと思いますので、気にしなくて大丈夫です。

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

ベストアンサー

次のような感じはいかがでしょうか。

js
1$(function () {
2    $('.acd-label').click(function () {
3        // クリックしたところ以外で開いているところがあればチェックボックスのチェックを外します(閉じます)。
4        const checkbox = $(this).attr('for');
5        $('.acd-check:checked').not(`#${checkbox}`).attr('checked', false);
6    });
7});