JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>toggle-navi test</title>
</head>

<body>
<div id="header"><h1>HEADER</h1></div>
    <div id="navi">
        <div id="closed1"><button id="but1">click-me1</button></div>
        <div id="open1">Now you see me</div>
        <div id="closed2"><button id="but2">click-me2</button></div>
        <div id="open2">Now you see me</div>        
        <div id="closed3"><button id="but3">click-me3</button></div>
        <div id="open3">Now you see me</div>        
    </div>
    <div class="clearfix"><hr /></div>
<div id="content"><h1>CONTENT</h1></div>



</body>
</html>

CSS

#header {
    height: 100px;
    width: 900px;
    background-color: #666;
}
#content {
    background-color: #CFC;
    height: 500px;
    width: 900px;
}
#closed1 {
    background-color: #093;
    height: 50px;
    width: 300px;
    float: left;
}
#open1 {
    background-color: #F00;
    height: 300px;
    width: 300px;
    float: left;    
}
#closed2{
    background-color: #093;
    height: 50px;
    width: 300px;
    float: left;    
}
#open2 {
    background-color: #F00;
    height: 300px;
    width: 300px;
    float: left;    
}
#closed3 {
    background-color: #093;
    height: 50px;
    width: 300px;
    float: left;    
}
#open3 {
    background-color: #F00;
    height: 300px;
    width: 300px;
    float: left;    
}
h1 {
    margin: 0;
}
button {
    background-color: #FF0;
    width: 300px;
    height: 50px;
}
.clearfix {
    clear: both;
    width:    900px;
}
</style>

JavaScript

$('#open1').hide();


$('#but1').click(function() {
    $('#open1').slideToggle('slow');
});
$('#open2').hide();


$('#but2').click(function() {
    $('#open2').slideToggle('slow');
});
$('#open3').hide();


$('#but3').click(function() {
    $('#open3').slideToggle('slow');
});