JSFiddle - React, Tailwind, and code Playground

HTML

<h2 class="acc_trigger"><a href="#">Div 1</a></h2>
<div class="acc_container">
<div class="block"> Yay content!</div>
</div>
<h2 class="acc_trigger"><a href="#">Div 2</a></h2>
<div class="acc_container">
<div class="block">
<form action="/action_page.php">
<label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name.."></div>
    
     <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">
    </div>  
</form>
<h2 class="acc_trigger"><a href="#">Div 3</a></h2>
<div class="acc_container">
<div class="block">Even More Content</div>
</div>

<a href="#" class="acc_expand-all">Expand/Collapse All </a>

CSS

h2.acc_trigger {
    padding: 0;    margin: 0 0 5px 0;
    height: 46px;    line-height: 46px;
    width: 590px;
    font-size: 1.5em;
    font-weight: normal;
    float: left;
margin-bottom:0;
}
h2.acc_trigger a {
    color: #222;
    text-decoration: none;
    display: block;
    padding: 0 0 0 50px;
}
h2.acc_trigger.active a {
    color: #FF0000;
    
}
h2.acc_trigger a:hover {
    color: #999;
}
h2.acc_trigger a:active, h2.active {
    color:#ED2224;
}

h2.active {background-position: left bottom;}
.acc_container {
    margin: 0 0 5px; padding: 0;
    overflow: hidden;
    font-size: 1.2em;
    width: 590px;
    clear: both;
    background: #f0f0f0;
    border: 1px solid #d6d6d6;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
border-top:none;
    
}
.acc_container .block {
    padding: 20px;
}

JavaScript

jQuery(document).ready(function($) {
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers

    //On Click
$('.acc_trigger').click(function(){
            $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all "active" state and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown();
        return false; //Prevent the browser jump to the link anchor

});


    $('.acc_expand-all').click(function(){
        var all = $('.acc_trigger'),
            active = all.filter('.active');
        
        if (all.length && all.length === active.length) {
            // All open; close them
            all.removeClass('active').next().slideUp();
        }
        else {
            // At least some are closed, open all
            all.not('.active').addClass('active').next().slideDown();
        }

        return false;
    });

    

});