JSFiddle - React, Tailwind, and code Playground

by Vince Oveson

HTML

<div class="container">
  <p><a href="#" class="floorplan" data-id="king"><strong>King</strong></a>

    <br>4 Bedroom x 2.5 Bathrooms</p>
  <p><a href="#" class="floorplan" data-id="wood"><strong>Wood</strong></a>

    <br>3 Bedroom X 2.5 Baths</p>
  <p><a href="#" class="floorplan" data-id="ash"><strong>The Ash</strong></a>

    <br>3 Bedroom x 2.5 Bathrooms</p>
  <p><a href="#" class="floorplan" data-id="well"><strong>The Well</strong></a>

    <br>4 Bedroom x 3.5 Bathrooms</p>

  <div class="floorplan-details initial" id="king">
    <h2>King</h2>
    <p>KingText</p>
  </div>

  <div class="floorplan-details" id="wood">
    <h2>Wood</h2>
    <p>Wood Text</p>
  </div>

  <div class="floorplan-details" id="ash">
    <h2>The Ash</h2>
    <p>The Ash Text</p>
  </div>

  <div class="floorplan-details" id="well">
    <h2>The Well</h2>
    <p>The Well Text</p>
  </div>
</div>

CSS

.floorplan-details:not(.initial) {
    display: none;
}
.container, body, html {
  background-color: #1f2227;
  color: #afafaf;
}

JavaScript

$(".floorplan").hover(function () {
    var data_id = $(this).data('id');
    
    $('.floorplan-details').each(function() {
        var el = $(this);
        
        if (el.attr('id') == data_id) {
            el.slideDown(1000);
        } else {
            el.slideUp(1000);
        }
    });
});