可折叠手风琴

Question

我已经使用CSS和Javascript创建了一个手风琴，但是我想不出在选择其他折叠手风琴后如何使打开的手风琴折叠起来。 我曾尝试在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

您需要遍历所有其他面板，并在单击任何一个按钮时将其关闭。

const panels = document.getElementsByClassName('panel');
[...panels].forEach(p => p.style.maxHeight = null)

您还应该删除所有按钮上的active类。

关闭所有面板并删除active类别后，然后将active类别应用于您单击的按钮并展开相关面板。

简而言之，单击按钮后：

1. 关闭所有面板
2. 从所有按钮中删除active课程
3. 将active班级应用于您按下的按钮
4. 按下按钮旁边的打开面板

Answer 2

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

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