JSFiddle - React, Tailwind, and code Playground

HTML

<div id="news">
    <div id="newsButton" class="closed">newsButton</div>
</div>
        
<div id="newsInhaltBg">
    <div id="newsInhalt">
        Test<br />
        test<br />
        test.
    </div>
</div>
<div id="info"></div>

CSS

#newsButton {
        cursor: pointer;
        width: 100px;
        height: 15px;
        position: relative;
        top: 10px;
    }
    
    .closed {
        background: red;
    }
    
    .open {
        background: green;
    }
    
    #news {    
        background: white;
        width: 100%;
        height: 30px;
        position: relative;
    }
    
    #newsInhaltBg {
        display: none;
        background: transparent;
        width: 990px;
        height: 100px;
       /* width: 100%;
        height: 100%;*/
        position: relative;
    }
    
    #newsInhalt {
        display: none;    
        width: 990px;
        margin: auto;
        position: relative;
    }

JavaScript

$('#newsButton').click(function() {
         var vis = ($('#newsInhalt').is(":visible"));
        $('#newsInhaltBg').slideToggle('slow', function() {
            $('#newsButton').toggleClass("closed open");   
            vis?$('#newsInhalt').hide():$('#newsInhalt').fadeIn()
        });
    });