JSFiddle - React, Tailwind, and code Playground

by Jay Haist

HTML

<div class="wrapper">
    <div class="graphic">
        <div class="detail-container-1 hide">
            <span class="arrow">></span> here goes some text
        </div>
        <div class="detail-container-2 hide">
            <span class="arrow">></span> here goes some text
        </div>
    </div>
    <div class="text">
        here goes some text
        <div class="det-btn">
            Show/Hide Details
        </div>
    </div>
    
</div>

CSS

.wrapper {
    background: grey;
    display: block;
    height: 300px;
    width: 100%;
    position: relative;
}

.graphic {
    position: relative;
    width: 75%;
    height: 100%;
    background: green;
    margin: 0 auto;
}

.detail-container-1 {
    width: 33%;
    height: 50px;
    background: red;
    position: absolute;
    left: 50px;
    top: 150px;
}

.detail-container-2 {
    width: 33%;
    height: 50px;
    background: red;
    position: absolute;
    right: 50px;
    top: 50px;
}

.detail-container-1.hide, .detail-container-2.hide {
    background: none;
    color: green;
}

.detail-container-1 span, .detail-container-2 span, .detail-container-1.hide span, .detail-container-2.hide span {
    color: blue;
}

.det-btn {
    background: yellow;
    width: intrinsic;
}

JavaScript

$(".detail-container-1").click(function(e) {
    $(this).parent(".detail-container-1").toggleClass("hide");    
});

$(".detail-container-2").click(function(e) {
    $(this).parent(".detail-container-2").toggleClass("hide");    
});

$(".detail-container-1 span").click(function(e) {
    $(this).parent(".detail-container-1").toggleClass("hide");    
});

$(".detail-container-2 span").click(function(e) {
    $(".detail-container-2").toggleClass("hide");    
});

$(".det-btn").click(function(e) {
    $(".detail-container-1").toggleClass("hide"); 
    $(".detail-container-2").toggleClass("hide");    
});