JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="button" value="Collapse All" id="ca"/>
    <input type="button" value="Expand All" id="ea"/>
    <br/> <hr/>
    <div class="accordion">    
        <div class="panel">
            <h1>Header Row 1</h1>
            <p class="content">
                some content
            </p>
        </div>
        <div class="panel">
            <h1>Header Row 2</h1>
            <p class="content">
                he Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks. 
            </p>
        </div>
        <div class="panel">
            <h1>Header Row 3</h1>
            <p class="content">
                It also supports three AutoSize modes so it can fit in a variety of layouts.
                
                None - The Accordion grows/shrinks without restriction. This can cause other elements on your page to move up and down with it.
                Limit - The Accordion never grows larger than the value specified by its Height property. This will cause the content to scroll if it is too large to be displayed.
                Fill - The Accordion always stays the exact same size as its Height property. This will cause the content to be expanded or shrunk if it isn't the right size.
                
            </p>
        </div>
        <div class="panel">
            <h1>Header Row 4</h1>
            <p class="content">
                The AutoSize "Limit" mode works exactly the same as the "Fill" mode for Internet Explorer 6 and 7 because they do not support the max-height CSS property.
                
                If you place the Accordion inside a  tag and have...

CSS

.accordion .panel
{
    border: dotted 1px #555555;
    margin-bottom:2px;
}

.accordion .panel h1
{
    padding:0.2em;
    font-size: 1.0em;
    font-weight: bold;
    background-color: #CCC;
    cursor: pointer;
}

.accordion .panel .content
{
    padding: 0.5em;
}

JavaScript

$(document).ready(function() {
   
    $('.accordion .panel h1').click(function() {
        $(this).next('.content').slideToggle();
    });
    
    var all = $('.accordion .panel .content')
    $('#ca').click(function() { all.slideUp(); });
    $('#ea').click(function() { all.slideDown(); });
});