I have a collection of links:
<p><a href="#" class="floorplan initial" data-id="king"><strong>King</strong></a><br>
4 Bedrooms x 2.5 Bathrooms</p>
<p><a href="#" class="floorplan" data-id="wood"><strong>Wood</strong></a><br>
3 Bedrooms X 2.5 Baths</p>
<p><a href="#" class="floorplan" data-id="ash"><strong>The Ash</strong></a><br>
3 Bedrooms x 2.5 Bathrooms</p>
<p><a href="#" class="floorplan" data-id="well"><strong>The Well</strong></a><br>
4 Bedrooms x 3.5 Bathrooms</p>
etc....
I am aiming to display or hide div content depending on hovering or mousing over the links. The div content remains visible until another link is hovered over.
Here is an example of the div content that will be shown/hidden:
<div style="display:none">
<div id="king">
<h2>King</h2>
<p>KingText</p>
</div>
</div>
<div style="display:none">
<div id="wood">
<h2>Wood</h2>
<p>Wood Text</p>
</div>
</div>
<div style="display:none">
<div id="ash">
<h2>The Ash</h2>
<p>The Ash Text</p>
</div>
</div>
<div style="display:none">
<div id="well">
<h2>The Well</h2>
<p>The Well Text</p>
</div>
</div>
and this is the jQuery code I have implemented so far:
$(function() {
$(".floorplan").hover(function() {
var data_id = $(this).data('id');
});
});
Note: in the HTML, there is a class labeled "initial" that I want to automatically show when the page loads - then it can also hide when other links are hovered over.
Seeking a straightforward and refined solution, thank you!