JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
    <div class="trigger">open door 1</div>
    <div class="door">
        behind door 1 is a foo
    </div>
</div>
<div class="block">
    <div class="trigger">open door 2</div>
    <div class="door">
        behind door 2 is a bar
    </div>
</div>
<div class="block">
    <div class="trigger">open door 3</div>
    <div class="door">
        behind door 3 is a "hello world"
    </div>
</div>

CSS

.block {
    width: 120px;
    display: inline-block;
    vertical-align: top;
}
.trigger {
    padding: 12px;
    background-color: #333333;
    color: #ffffff;
}
.door {
   padding: 12px;
    display: none;
    background-color: #cccccc;
}

JavaScript

$('.trigger').on('mouseover, mouseenter', function() {
	$(this).next('.door').slideDown();
});
$('.trigger').on('mouseleave', function() {
	$(this).next('.door').slideUp();
});