JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel" id="panel1">panel1</div>
<div class="content" id="panel1C">content1</div>

<div class="panel" id="panel2">panel2</div>
<div class="content" id="panel2C">content2</div>

<div class="panel" id="panel3">panel3</div>
<div class="content" id="panel3C">content3</div>

CSS

.panel, span {cursor:pointer; }
.panel { background-color:Black; color:white; height:40px; border-bottom: 1px solid #cdcccc; }
span { background-color:red; color:white; }
.content { background-color:#ccc; height:40px; }

JavaScript

$('.content').slideUp(100);
    $('.content').eq(1).slideDown(600);
    //for collapsing second part of an accordion
    
    $('.panel').hover(function() {//open
        var takeID = $(this).attr('id');//takes id from clicked ele
        $('.content').stop(false,true).slideUp(600);
        //used stop for prevent conflict
        $('#'+takeID+'C').stop(false,true).slideDown(600);
        ///show's hovered ele's id macthed div
    });