クリック時にサイドメニューの中身の表示・非表示

サイドメニューAの要素が開いている時、サイドメニューBをクリックした時に自動的にAの要素を非表示にすることはできますか。

サイドメニューAをクリックすると要素が表示され、もう一度Aをクリックすると非表示にするところまで出来ました。初めはこのデザインでよいと思っていたのですが、サイドメニューのボタンは6つありまして、それらの要素を全部表示されてしまうと画面からはみだしてしまうことになると分かりました。(読者が見やすいようにサイドメニューは固定にしています)

添付画像で説明させて頂きます。
↓こちらは要素が開いていない状態

↓こちらは一番上のTodos(21)というボタンをクリックした状態です
要素が表示されています

######そしてこちらのように↓Arroz(7)をクリックした時に、自動的にすでに開いていた要素(Todos(21)の要素)を非表示にして Arroz(7)の要素を表示することができたら理想的です

色んなサイトを拝見させて頂きまして、一つの要素に対して表示・非表示の参考サイトは無数にあるのですが、複数の要素に対しての説明してくださっている参考サイトを見つけることが出来ませんでした。
もしこのような動作が実現できる方法をご存じの方がいらっしゃれば教えていただけませんでしょうか。よろしくお願いいたします。
(visual studio で作成しています。jqueryもダウンロードしてある状態です)

Html コード
<!--各label には for = label1 ～2 ～3 と 番号をふって別々に動作するようにしました-->
<!--サイドメニューtodos-->
<div  class="box-aside">
        <label for="label1" class="cada-boton letra-rosa1 text-center">Todos (21)</label>
        <input type="checkbox" id="label1"/>

        <div class="invisible box-shadow-O letra-verde">
              <P><a href="#arroz-blanco">Arroz blanco</a></P>
              <P><a href="#arroz-frito">Arroz frito</a></P>
              <P><a href="#takikomigohan">Arroz con pollo</a></P>
              <P><a href="#oyakodon">Arroz con pollo y huevo</a></P>
              <P><a href="#bizcocho">Bizcocho japonés</a></P>
              <!--以下中身省略-->            
        </div>
        </div>
<!--サイドメニューArroz-->
<div class="box-aside">
              <label for="label2" class="cada-boton letra-rosa1 text-center">Arroz (7)</label>
              <input type="checkbox" id="label2"/>

        <div class="invisible box-shadow-O letra-verde">
              <P><a href="#arroz-blanco">Arroz blanco</a></P>
              <P><a href="#arroz-frito">Arroz frito</a></P>
              <P><a href="#takikomigohan">Arroz con pollo</a></P>
              <P><a href="#oyakodon">Arroz con pollo y huevo</a></P>
              <P><a href="#curry">Curry</a></P>
              <P><a href="#maki-sushi">Maki suhi</a></P>
              <P><a href="#omurice">omurice</a></P>
        </div>
        </div>
<!--以下省略-->

cssコード

.invisible p{
    padding: 5px;
    white-space: nowrap
}

/*メニューバー要素のデザイン*/
.invisible {
    display: none;
    margin-bottom: 10px;
    margin-top: 10px;
    height: 200px;
    overflow: auto;
    border-radius: 10px;
    transition: 0.5s;}
::-webkit-scrollbar { width: 15px; }
::-webkit-scrollbar-track {
    background: #ebbfbf;
    border-radius: 10px; }
::-webkit-scrollbar-thumb {
    background: #b37474;
    border-radius: 10px;}


/*ボタン・ホバー時*/
label:hover {background-color: rgb(17, 15, 8);}

/*クリックで表示*/
.box-aside input:checked ~ .invisible {
display: block;
animation-name: fade-in;
animation-duration: 2s;}


/*要素のふんわり表示*/
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }}

Lhankor_Mhy

2021/04/06 09:58

「アコーディオン自動で閉じる」でググるといろいろ出てきましたが、それらではダメでしたか？

yukiko-yukiko

2021/04/06 11:37

Lhandor_Mhy さん! 「アコーディオン自動で閉じる」というものがあるのですね! 知りませんでした! 今から検索してみます! ありがとうございます!

yukiko-yukiko

2021/04/06 14:07

探してみるとよそさうな参考ページがありましたhttps://cotodama.co/jquery_accordion/ 試してみますと出来ましたが、動きがぎくしゃくしていてサイトの雰囲気とあわないので今回はご回答くださった hatena19 のアドバイスを起用したいと思います。いつも貴重な情報をありがとうございます!

Lhankor_Mhy

2021/04/06 14:38

ご解決されて何よりです。

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

回答1件

ベストアンサー

要するに一つだけ選択できるようにすればいいので、
チェックボックスをラジオボタンに変更すればいいでしょう。
name属性を同じにしておけばその中で一つだけ選択できるようになります。

html
1<!--各label には for = label1 ～2 ～3 と 番号をふって別々に動作するようにしました-->
2<!--サイドメニューtodos-->
3<div  class="box-aside">
4  <label for="label1" class="cada-boton letra-rosa1 text-center">Todos (21)</label>
5  <input type="radio" id="label1" name="accordion">
6  <div class="invisible box-shadow-O letra-verde">
7    <P><a href="#arroz-blanco">Arroz blanco</a></P>
8    <P><a href="#arroz-frito">Arroz frito</a></P>
9    <P><a href="#takikomigohan">Arroz con pollo</a></P>
10    <P><a href="#oyakodon">Arroz con pollo y huevo</a></P>
11    <P><a href="#bizcocho">Bizcocho japonés</a></P>
12    <!--以下中身省略-->            
13  </div>
14</div>
15<!--サイドメニューArroz-->
16<div class="box-aside">
17  <label for="label2" class="cada-boton letra-rosa1 text-center">Arroz (7)</label>
18  <input type="radio" id="label2" name="accordion">
19  <div class="invisible box-shadow-O letra-verde">
20    <P><a href="#arroz-blanco">Arroz blanco</a></P>
21    <P><a href="#arroz-frito">Arroz frito</a></P>
22    <P><a href="#takikomigohan">Arroz con pollo</a></P>
23    <P><a href="#oyakodon">Arroz con pollo y huevo</a></P>
24    <P><a href="#curry">Curry</a></P>
25    <P><a href="#maki-sushi">Maki suhi</a></P>
26    <P><a href="#omurice">omurice</a></P>
27  </div>
28</div>
29<!--以下省略-->    
30