【アコーディオンメニュー】１つだけ展開したい（他は閉じる）

前提・実現したいこと

jQueryを利用してアコーディオンメニューを作成中です。選択した１つのメニューのみ展開して、その他は閉じるものを作成したいです。
ご回答よろしくお願いします。

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

メニューは４つあります。上２つのメニューはうまく展開し自動で閉じることができますが、下２つのメニューが展開はするものの、他を選択した際に自動で閉じることができません。

該当のソースコード

HTML
1        <div class="accordion">
2            <div class="accordion-wrap">
3                <div class="accordion-item">
4                    <p class="accordion-header">はじめての方へ</p>
5                    <i class="fa fa-angle-down tap" aria-hidden="true"></i>
6                </div>
7                <div class="accordion-text">
8                    <p>Moonのお客様は3割がはじめて来店されるお客さまです。はじめての方でも落ち着ける店内で、優しいママが歓迎します。</p>
9                </div>
10            </div>
11            <div class="accordion-wrap">
12                <div class="accordion-item">
13                    <p class="accordion-header">お一人様へ</p>
14                    <i class="fa fa-angle-down tap" aria-hidden="true"></i>
15                </div>
16                <div class="accordion-text">
17                    <p>１名様でもご遠慮なくお越しください。日頃のストレスは忘れて、ゆっくりお話ししませんか？Moonでは全く気を遣う必要がございませんよ。</p>
18                </div>
19            </div>
20            <div class="accordion-wrap">
21                <div class="accordion-item">
22                    <p class="accordion-header">女性の方へ</p>
23                    <i class="fa fa-angle-down tap" aria-hidden="true"></i>
24                </div>
25                <div class="accordion-text">
26                    <p>女性のお客様にもよくおいでになります。お友達感覚でお話しできると好評です。多い時には半分が女性のお客様の時も…！</p>
27                </div>
28            </div>
29            <div class="accordion-wrap">
30                <div class="accordion-item">
31                    <p class="accordion-header">団体様へ</p>
32                    <i class="fa fa-angle-down tap" aria-hidden="true"></i>
33                </div>
34                <div class="accordion-text">
35                    <p>団体様もぜひお越しください。広くはない店内ですが、座席数は最大１１席です。（６席＋簡易イス５席）ご予約いただけると幸いです。</p>
36                </div>
37            </div>    
38        </div>
39

SCSS
1        .accordion{
2            .accordion-wrap{
3                padding-top: 20px;
4                width: 50%;
5                margin: 0 auto;
6                .accordion-item{
7                    display: flex;
8                    justify-content: space-between;
9                    align-items: center;
10                    border-bottom: 2px solid #00afcc;
11                    padding-top: 20px;
12                    cursor: pointer;
13                    transition: ease-in-out 300ms;
14                    &.border-none{
15                        border-bottom: none;
16                    }
17                    .accordion-header{
18                        padding: 0;
19                        transition: ease-in-out 300ms;
20                        &.color-blue{
21                            color: rgb(31, 78, 121);
22                        }
23                    }
24                    .tap{
25                        display: inline-block;
26                        transition: ease-in-out 300ms;
27                        &.rotate{
28                            transform: rotateX(180deg);
29                        }
30                    }
31                }
32                .accordion-text{
33                    display: none;
34                    text-align: left;
35                    font-size: 0.8rem;
36                    border-bottom: 2px solid #00afcc;
37                    &.block{
38                        display: block;
39                    }
40                }
41            }
42       }

jQuery
1$('.accordion-wrap').click(function(){
2    $(this).children().eq(1).slideToggle(300);
3    $(this).children().eq(0).toggleClass('border-none');
4    $(this).find('.accordion-header').toggleClass('color-blue');
5    $(this).find('.tap').toggleClass('rotate');
6
7    $('.accordion-wrap').not(this).children().eq(1).slideUp(300);
8    $('.accordion-wrap').not(this).children().eq(0).removeClass('border-none');
9    $('.accordion-wrap').not(this).find('.accordion-header').removeClass('color-blue');
10    $('.accordion-wrap').not(this).find('.tap').removeClass('rotate');
11});

退会済みユーザー

2020/03/13 22:57

jQuery UI を使わない理由があるのでしょうか？

退会済みユーザー

2020/03/14 01:11

jQuery UI と Bootstrap のデモページの URL を貼っておきます。 jQuery UI - Accordion https://jqueryui.com/accordion/ Bootstrap - Collapse https://getbootstrap.com/docs/3.3/javascript/#collapse

okuzono311

2020/03/14 01:37

jQuery UI、恥ずかしながらその存在自体初めて知りました。教えて下さりありがとうございます。

okuzono311

2020/03/14 01:39

ただjQueryを学ぶために、できればUIを利用しない方法も知りたいです。よろしければその際のご回答もお願いします。

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

回答1件

ベストアンサー

直接的な問題解決ではないですが、トリガーを1つ (以下の例だと.activeというクラス) に集約させると楽だと思います。

↓まずCSS側で「アクティブ時の見た目」と「非アクティブ時の見た目」を作り、

CSS
1.accordion-wrap {
2  /* 非アクティブ時の見た目 */
3}
4.accordion-wrap.active {
5  /* アクティブ時の見た目 */
6}

↓そのあとJavaScript側で、クリックした.accordion-wrapにだけ.activeクラスを付与するという処理を加えます。

jQuery
1$('.accordion-wrap').click(function() {
2    if ($(this).hasClass('active')) {
3        $(this).removeClass('active');
4    }
5    else {
6        // いったんすべての.accordion-wrapからアクティブ時のクラスを削除
7        $('.accordion-wrap').removeClass('active');
8    　　
9        // クリックした.accordion-wrapにのみアクティブ時のクラスを追加
10        $(this).addClass('active');
11    }
12});