JSFiddle - React, Tailwind, and code Playground
HTML
<div class="widnow" style="width: auto;">
<div id="title_bar">
<button type="button" class="button">max</button>
</div>
<div class="box" style="height:100px; width: 400px; background:green; display:none;">
<span id="info3">information1</span>
<div class="chart3" style="width:80%; height:300px;">chartsssssssss</div>
</div>
</div>
<br clear='all' />
<div class="widnow" style="width: auto;">
<div id="title_bar">
<button type="button" class="button">max</button>
</div>
<div class="box" style="height:100px; width: 400px; background:green; display:none;">
<span id="info3">information2</span>
<div class="chart3" style="width:80%; height:300px;">chartsssssssss</div>
</div>
</div>
<br clear='all' />
<div class="widnow" style="width: auto;">
<div id="title_bar">
<button type="button" class="button">max</button>
</div>
<div class="box" style="height:100px; width: 400px; background:green; display:none;">
<span id="info3">information3</span>
<div class="chart3" style="width:80%; height:300px;">chartsssssssss</div>
</div>
</div>
<br clear='all' />
<div class="widnow" style="width: auto;">
<div id="title_bar">
<button type="button" class="button">max</button>
</div>
<div class="box" style="height:100px; width: 400px; background:green; display:none;">
<span id="info3">information4</span>
<div class="chart3" style="width:80%; height:300px;">chartsssssssss</div>
</div>
</div>
CSS
.widnow {
width:400px;
border: 1px solid #DCDCDC;
}
.button {
width: 120px;
height: 32px;
float:left;
cursor:pointer;
position:relative;
margin: 0px 0px 0px 0px;
}
.title_bar {
background: red;
height: 25px;
width: auto;
border-bottom: 1px solid #DCDCDC;
}
JavaScript
$(".button").click(function () {
$(this).closest('div').siblings(".box").slideToggle();
if ($(this).text() == "max") {
$(this).text('min');
} else {
$(this).text('max');
}
});