JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="rules-pane" class="pane">Model1</div>
<div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>

CSS

.pane-launcher{
    position:absolute;
    top: 0;
    width:80px;
    height:80px;
    display:block;
}
#rules {
    left:0px;
}
#scenarios {
    left:90px;
}
.pane{
    position:absolute;    
    left: 0;
    height:50px;
    display:none;
    opacity:1;
}
#rules-pane {
    top:80px;
    width:170px;
    background-color:yellow;
}

#scenarios-pane {
    top:80px;
    width:170px;
    background-color:blue;
}

JavaScript

$(".pane-launcher").click(function () {
	// Set the effect type
    var effect = 'slide';
 
    // Set the options for the effect type chosen
    var options = { direction: 'up' };
 
    // Set the duration (default: 400 milliseconds)
    var duration = 700;
    $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});