Want to Modify the Pure HTML/CSS Collapsible Panel on Codepen

HTML/CSS
1

I want to add a pure HTML/CSS collapsible panel to my site and I am working on it but there is a thing that I need to do and for that I need someone to help me out.

I want to close the all accordion panels when another one is opened. But here after opening the other one, the previous one doesn’t close, it remains open.

<h1>BJCP Style 26. Trappist Ale</h1>
<section class="accordion">
    <input type="checkbox" name="collapse" id="handle1" checked="checked" hidden>
    <h2 class="handle">
        <label for="handle1">26A. Trappist Single</label>
    </h2>
    <div class="content">
        <p><strong>Overall Impression:</strong> A pale, bitter, highly attenuated and well carbonated Trappist ale, showing a fruity-spicy Trappist yeast character, a spicy-floral hop profile, and a soft, supportive grainy-sweet malt palate.</p>
        <p><strong>History:</strong> While Trappist breweries have a tradition of brewing a lower-strength beer as a monk’s daily ration, the bitter, pale beer this style describes is a relatively modern invention reflecting current tastes. Westvleteren
            first brewed theirs in 1999, but replaced older lower-gravity products.</p>
    </div>
</section>
<section class="accordion">
    <input type="checkbox" name="collapse2" id="handle2" hidden>
    <h2 class="handle">
        <label for="handle2">26B. Belgian Dubbel</label>
    </h2>
    <div class="content">
        <p><strong>Overall Impression:</strong> A deep reddish-copper, moderately strong, malty, complex Trappist ale with rich malty flavors, dark or dried fruit esters, and light alcohol blended together in a malty presentation that still finishes fairly
            dry.
        </p>
        <p><strong>History:</strong> Originated at monasteries in the Middle Ages, and was revived in the mid-1800s after the Napoleonic era.</p>
    </div>
</section>
<section class="accordion">
    <input type="checkbox" name="collapse2" id="handle3" hidden>
    <h2 class="handle">
        <label for="handle3">26C. Belgian Tripel</label>
    </h2>
    <div class="content">
        <p><strong>Overall Impression:</strong> A pale, somewhat spicy, dry, strong Trappist ale with a pleasant rounded malt flavor and firm bitterness. Quite aromatic, with spicy, fruity, and light alcohol notes combining with the supportive clean malt
            character to produce a surprisingly drinkable beverage considering the high alcohol level.</p>
        <p><strong>History:</strong> Originally popularized by the Trappist monastery at Westmalle.</p>
    </div>
</section>


    .accordion>input[type="checkbox"] {
        position: absolute;
        left: -100vw;
    }
    
    .accordion .content {
        overflow-y: hidden;
        height: 0;
        /* transition: height 0.3s ease; */
    }
    
    .accordion>input[type="checkbox"]:checked~.content {
        height: auto;
        overflow: visible;
    }
    
    .accordion label {
        display: block;
    }
    /*
 Styling
*/
    
    body {
        font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
        color: #333;
        font-weight: 300;
    }
    
    .accordion {
        margin-bottom: 1em;
        /* border-bottom: 1px solid #e8e8e8; */
        border-bottom: 1px solid #e8e8e86b
    }
    
    .accordion>input[type="checkbox"]:checked~.content {
        padding: 15px;
        border: 0px solid #e8e8e8;
        border-top: 0;
        border-top: 2px solid #004287;
        margin-top: 10px;
    }
    
    .accordion .handle {
        margin: 0;
        font-size: 1.125em;
        line-height: 1.2em;
    }
    
    .accordion label {
        color: #333;
        cursor: pointer;
        font-weight: normal;
        padding: 15px;
        background: #fff;
    }
    
    .accordion label:nth-child(1):before {
        content: "1";
        width: 20px;
        font-weight: bold;
        text-align: center;
        /* position: absolute; */
        /* left: 0; */
        /* top: 0; */
        margin-right: 9px;
        padding: 13px 7.5px;
        border-right: 2px solid #c82333;
        color: #4285F4;
        /* #00CED1, #7bcddb */
    }
    
    .accordion label:hover,
    .accordion label:focus {
        background: #fff;
    }
    
    .accordion .handle label:after {
        content: "❯";
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
        width: 1em;
        height: 1em;
        text-align: center;
        float: right;
        color: #FBBC05;
    }
    
    .accordion>input[type="checkbox"]:checked~.handle label:after {
        content: "❯";
    }
    
    .accordion>input[type="checkbox"]:checked~.handle label:after {
        transform: rotate(90deg);
    }
    /*
 Demo purposes only
*/
    
    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }
    
    body {
        padding: 40px;
    }
    
    a {
        color: #06c;
    }
    
    p {
        margin: 0 0 1em;
    }
    
    h1 {
        margin: 0 0 1.5em;
        font-weight: 600;
        font-size: 1.5em;
    }
    
    .accordion {
        max-width: 65em;
    }
    
    .accordion p:last-child {
        margin-bottom: 0;
    }
2

Hey its Harvel, well try using a variable that will make the corresponding selected element to be active in that only that active element will be expanded in accordance to your preferences, explicitly the onClick event handler will be of greater importance in changing the active tab so as the rest will collapse automatically

3

Do u know some JAVASCRIPT?
I’d like to reference you to using react its much easier when you are using it instead

4

Leave all other things that i have mentioned just help me out with 2nd point. I want to close the all accordion panels when another one is opened. But here after opening the other one, the previous one doesn’t close, it remains open.

5

The link below will help you implement this. They are using checkboxes, which will allow any checked checkboxes to expand or collapse. Since you said you wanted only one to be open I think you would be better off using a radio input instead, since only one can be selected at a time. Good luck