JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Main">
    <div id="MainHeader"><strong>Entête de fenêtre</strong></div>
    <div id="MainContent">Loremupsom bla bla bla<br />2e ligne bla bla bla<br />3e ligne bla bla bla</div>
</div>

CSS

#Main {
    width:500px;
	-webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;    
    border: 1px solid black;
}

#MainHeader {
    width: auto;
    height: auto;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}

#MainContent {
    height:0px;
    border-top: solid 1px black;
    word-wrap: break-word;
    overflow: hidden;
    display:none;
}

JavaScript

$("#MainHeader").unbind('click').bind('click', function() {
    if ($("#MainContent").css('height').replace("px", "").valueOf() < 1) {
        $("#MainContent").css('display', 'block');
        $("#MainContent").animate({
            height: "60px"
        }, 400);
    } else {
        $("#MainContent").animate({
            height: "0px"
        }, 400, function() {
            $("#MainContent").css('display', 'none');
        });
    }
});