JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<h3 class="series-header">Games Played (Best of 5)</h3>
<h4 class="series-title">Game 1<h4>
<div class="series">
    <img class="map" height="256" width="256" src="" />
    <h4>Positions</h4>
    <h4>Created</h4>
    <h4>Modified</h4>
    <h4>Notes</h4>
</div>
    
<h4 class="series-title">Game 2<h4>
<div class="series">
    <img class="map" height="256" width="256" src="" />
    <h4>Positions</h4>
    <h4>Created</h4>
    <h4>Modified</h4>
    <h4>Notes</h4>
</div>
    
<h4 class="series-title">Game 3<h4>
<div class="series">
    <img class="map" height="256" width="256" src="" />
    <h4>Positions</h4>
    <h4>Created</h4>
    <h4>Modified</h4>
    <h4>Notes</h4>
</div>

CSS

.series-header {
    color: red;
    border: solid 2px red;
    width: 15em;
    padding: 5px 10px;
}

.series {
    width: 500px;
    height: 300px;
    background-color: #ccc;
    padding: 20px;
    margin: 5px 5px 5px 10px;
}

.series-title {
    background-color: red;
    color: white;
    width: 10em;
    padding: 5px 10px;
    cursor: pointer;
    margin: 5px 5px 5px 10px;
}

.map {
    float: left;
    margin: 5px 15px 5px 5px;
    background-color: #006666;
}

.series span {
    background-color: red;
    color: white;
    padding: 5px 60px 5px 15px;
}

JavaScript

$('.series').hide();

$('.series-title').click(function () {
    if ($(this).next().is(':hidden')) {
        $(this).next().show();
        return true;
    } else {
        $(this).next().hide();
        return true;
    }
});