JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="box">
<h2>Langtidsparkering</h2>
<div class="content">Lorem ipsum dolor sit amet..</div>
</div>
<div class="listcontainer">
<div class="list"></div>
<div class="listbar">
<button class="viewPrices" type="submit" title="Open" style="float:right;margin-top:8px; margin-right:8px;">Se priser<span class="arrow"> ></span>
</button>
</div>
</div>
</div>
</br>
<div class="container">
<div class="box">
<h2>Langtidsparkering</h2>
<div class="content">Lorem ipsum dolor sit amet..</div>
</div>
<div class="listcontainer">
<div class="list"></div>
<div class="listbar">
<button class="viewPrices" type="submit" title="Open" style="float:right;margin-top:8px; margin-right:8px;">Se priser<span class="arrow"> ></span>
</button>
</div>
</div>
</div>
CSS
body {
font-family: Arial;
color: #4c4c4c;
font-size: 12px;
}
h1, h2, h3 {
margin: 0;
margin-bottom: 12px;
}
.container {
max-width: 794px;
}
.box {
width: 768px;
min-height: 160px;
background-color:#fff;
border: 1px solid #c4c4c4;
padding: 12px;
}
.content {
height: 138px;
max-height: 138px;
overflow: hidden;
}
.listaccordion {
}
.listbar {
position: relative;
height: 40px;
background-color: #F0F0F0;
bottom: 0;
border-bottom: 1px solid #c4c4c4;
border-left: 1px solid #c4c4c4;
border-right: 1px solid #c4c4c4;
}
.list {
height: 600px;
background-color: #c4c4c4;
display: none;
}
.visible {
display: block !important;
}
.hidden {
display: none;
}
JavaScript
$(".viewPrices").click(function () {
$(this).closest('.listcontainer').find('.list').toggleClass('visible');
});