javascript - 可折叠 Accordion

Question

我使用 CSS 和 Javascript 创建了一个 Accordion ，但我不知道如何在选择不同的 Accordion 后折叠打开的 Accordion 。我试过在 Javascript 中使用可折叠功能，但它似乎不起作用。

这是我的 CodePen 的链接:https://codepen.io/iragreen/pen/rrgvRP

下面还有代码:

HTML

<div class="article-content g-px-15">
<h1 class="g-pa-7 uofl-red">Mobile Ticketing</h1>
<hr class="g-mb-14">
<div id="mobile-content" class="g-pa-20">
    <p><strong>Louisville Athletics is excited to introduce mobile entry at all of our sporting venues this year!</strong> Now, you won't need to print and remember to bring tickets to the event. Mobile tickets enable you to manage, view, scan, transfer and sell your tickets with the device that’s always with you.</p>
    <p>The mobile ticketing platform was designed in conjunction with Ticketmaster and allows fans the convenience of managing their tickets with just a few clicks.</p>
    <p>Cardinals season ticket members and single-game buyers can access their tickets by downloading the official CardsMobile App to their mobile device. The app is available for free on both Apple and Android devices.</p>
    <div class="row">
       <table align="center">
           <tr>
               <td class="g-px-5">
                    <a href="https://itunes.apple.com/us/app/cardsmobile/id1234324522?mt=8"><img width="200" height="auto" src="https://gocards.com/images/2018/8/7/app_store_badge_may17.png"></a>
                </td>
                <td class="g-px-5">
                    <a href="https://play.google.com/store/apps/details?id=com.sidearmsports.fanapp.louisville"><img width="200" height="auto" src="https://gocards.com/images/2018/8/9/google_play_web18.png" /></a>
                </td>
            </tr>
        </table>
    </div>
    <p>We have developed a detailed mobile-ticket guide to aid fans in accessing, transferring, and selling their tickets for the upcoming season. Please use the tutorials below for step-by-step instructions on each of the mobile ticketing features.</p>

</div>


    <button class="accordion">MOBILE WALLET</button>
        <div class="panel">
            <p>Make sure to add your tickets to your mobile wallet for fast scanning at the gates!</p>
        </div>

    <button class="accordion">GET THE APP &amp; ACCESS YOUR TICKETS</button>
        <div class="panel">
            <div class="row flex flex-wrap">
               <div class="flexbox-container g-py-15">
                <div class="small-12 medium-12 large-4 columns g-px-5">
                    <div class="directions g-mb-0">Go to GoCards.com/CardsMobile and download the official CardsMobile app. Available on Google Play and the iTunes App Store.</div>
                    <div class="screenshots"><img src="https://gocards.com/images/2018/8/9/get_app_1.png" border="0"></div>
                </div>

                <div class="small-12 medium-12 large-4 columns g-px-5">
                    <div class="directions g-mb-0">Tap the CardsMobile app icon and then tap the "Tickets" icon in the bottom nav.</div>
                    <div class="screenshots"><img src="https://gocards.com/images/2018/8/14/get_app_2.png" border="0"></div>
                </div>

                <div class="small-12 medium-12 large-4 columns g-px-5">
                    <div class="directions g-mb-0">Tap the "Sign in to Louisville" button.</div>
                    <div class="screenshots"><img src="https://gocards.com/images/2018/8/14/get_app_3.png" border="0"></div>
                </div>

                <div class="small-12 medium-12 large-4 columns g-px-5">
                    <div class="directions g-mb-0">Log in using the email address and password associated with your 'My Cardinals Account.'</div>
                    <div class="screenshots"><img src="https://gocards.com/images/2018/8/14/get_app_4.png" border="0"></div>
                </div>

                <div class="small-12 medium-12 large-4 columns g-px-5">
                    <div class="directions g-mb-0">To complete login and be redirected to your account, tap "Authorize."</div>
                    <div class="screenshots"><img src="https://gocards.com/images/2018/8/14/get_app_5.png" border="0"></div>
                </div>

                <div class="small-12 medium-12 large-4 columns g-px-5">
                    <div class="directions g-mb-0">Tap the +Person icon in the bottom right of the screen.</div>
                    <div class="screenshots"><img src="https://gocards.com/images/2018/8/14/get_app_6.png" border="0"></div>
                </div>

                <div class="small-12 medium-12 large-4 columns g-px-5">
                    <div class="directions g-mb-0">Enter your Ticketmaster.com credentials.<br />*Note: Your login information may not be the same as your CAF/My Cardinals Account.</div>
                    <div class="screenshots"><img src="https://gocards.com/images/2018/8/14/get_app_7.png" border="0"></div>
                </div>

                <div class="small-12 medium-12 large-4 columns g-px-5">
                    <div class="directions g-mb-0">To complete log in and merge your accounts, tap "Authorize."</div>
                    <div class="screenshots"><img src="https://gocards.com/images/2018/8/14/get_app_8.png" border="0"></div>
                </div>

            </div>
           </div>
        </div>

        <button class="accordion">VIEW &amp; SAVE YOUR TICKETS</button>
        <div class="panel">
            <div class="row">
               <div class="flexbox-container g-py-15">
                <div class="small-12 medium-12 large-4 columns g-px-5">
                    <div class="directions g-mb-0">Tap on an upcoming event and use the action buttons to view/add to wallet, send tickets to a friend, resell, or donate them.</div>
                    <div class="screenshots"><img src="https://gocards.com/images/2018/8/14/save_tix_1.png" border="0"></div>
                </div>

                <div class="small-12 medium-12 large-4 columns g-px-5">
                    <div class="directions g-mb-0">To access your barcode require for entry, use the View Barcode or Add to Wallet icon.</div>
                    <div class="screenshots"><img src="https://gocards.com/images/2018/8/14/save_tix_2.png" border="0"></div>
                </div>

                <div class="small-12 medium-12 large-4 columns g-px-5">
                    <div class="directions g-mb-0">Click "Add to Wallet" on each ticket you want to save to your mobile device.</div>
                    <div class="screenshots"><img src="https://gocards.com/images/2018/8/14/save_tix_3.png" border="0"></div>
                </div>

                <div class="small-12 medium-12 large-4 columns g-px-5">
                    <div class="directions g-mb-0">Open your mobile wallet for easy access to your tickets and fast scanning at the gates on game day.</div>
                    <div class="screenshots"><img src="https://gocards.com/images/2018/8/14/save_tix_4.png" border="0"></div>
                </div>

            </div>
           </div>
        </div>

        <button class="accordion">TRANSFER YOUR TICKETS</button>
            <div class="panel">
                <div class="row">
                   <div class="flexbox-container g-py-15">
                    <div class="small-12 medium-12 large-4 columns g-px-5">
                        <div class="directions g-mb-0">Tap on an upcoming event and select "Send."</div>
                        <div class="screenshots"><img src="https://gocards.com/images/2018/8/15/transfer_1.png" border="0"></div>
                    </div>

                    <div class="small-12 medium-12 large-4 columns g-px-5">
                        <div class="directions g-mb-0">Select the tickets you would like to transfer and tap "Send Tickets."</div>
                        <div class="screenshots"><img src="https://gocards.com/images/2018/8/15/transfer_2.png" border="0"></div>
                    </div>

                    <div class="small-12 medium-12 large-4 columns g-px-5">
                        <div class="directions g-mb-0">Select the method that you would like to use to deliver tickets to the recipient. You can choose to send via email, text, or social media.</div>
                        <div class="screenshots"><img src="https://gocards.com/images/2018/8/15/transfer_3.png" border="0"></div>
                    </div>

                    <div class="small-12 medium-12 large-4 columns g-px-5">
                        <div class="directions g-mb-0">After selecting the method of sharing, enter the recipient's contact info and tap "Send."</div>
                        <div class="screenshots"><img src="https://gocards.com/images/2018/8/15/transfer_4.png" border="0"></div>
                    </div>

                </div>
               </div>
            </div>

        <button class="accordion">PAY YOUR INVOICE</button>
            <div class="panel">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

        <button class="accordion">ACCEPT TRANSFERRED TICKETS</button>
            <div class="panel">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

Javascript

    var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
        if (panel.style.maxHeight){
            panel.style.maxHeight = null;
        } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
        } 
    });
}

CSS

    .accordion {
    background-color: #c92027;
    color: #fff;
    cursor: pointer;
    padding: 1.075rem;
    width: 100%;
    border: none;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #000;
    transition: 0.5s ease-in-out;
}

.accordion:after {
    content: '\002B';
    color: #fff;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

#mobile-content {
    background-color: #ddd;
    width: 100%;
}

.uofl-red {
    color: #c92027;
}

.flexbox-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.flexbox-item {
    /*flex-basis: 33%;*/
    align-self: flex-end;
}
.directions {
    text-align: center;
    min-height: 65px;
}

.screenshots {
    text-align: center;
}

Answer 1

如果会用Jquery，就可以用函数.addClass和.removeClass，相同的请找伪代码

$('.accordion').click(function(e){
  $('.panel').removeClass('active');
  $(this).closest().addClass('active');
});