CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mia Sno
Mia Sno

Reputation: 947

Show/hide div content on mouseover based on data attribute of link with initial div showing

I have a set of links:

<p><a href="#" class="floorplan initial" 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>

etc....

I want to show/hide div content based on hovering or mousing over the links. The div content stays until another link is hovered over.

Here is sample of the div content that shows/hides:

<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 here is my jquery so far:

$(function() {
  $(".floorplan").hover(function() {
    var data_id = $(this).data('id');

  });
});

Note the class marked "initial" in the html I want to make it show on page load by default - then it can also hide when hovered over others.

Looking for most simple elegant solution, thank you!

Upvotes: 1

Views: 3532

Answers (3)

Hicham El Hammouchi
Hicham El Hammouchi

Reputation: 524

While I would structure the html a bit differently, if we were to use your exact html, I would do:

$(function() {
  var currentElement = $(".initial").data('id');
  showElement(currentElement);

   $(".floorplan").hover(function() {
     hideElement(currentElement);
     showElement(this.dataset.id);
     currentElement = this.dataset.id;
   });

   function showElement(id){
     $("#" + id).parent().show();
   }

   function hideElement(id){
     $("#" + id).parent().hide();
   }

});

Upvotes: 1

m4ktub
m4ktub

Reputation: 3121

I'll simplify the HTML a bit to make it easier to understand.

<div id="anchors">
    <a href="#" data-id="a" class="floorplan initial">a</a>
    <a href="#" data-id="b" class="floorplan">b</a>
    <a href="#" data-id="c" class="floorplan">c</a>
</div>

<div id="contents">
    <div id="a" style="display: none;">content a</div>
    <div id="b" style="display: none;">content b</div>
    <div id="c" style="display: none;">content c</div>
</div>

My suggestion is to use display: none directly on the content div and then use the following Javascript:

$(function() {
    $('a.floorplan').hover(function() {
        $('#contents div').hide();
        var divId = $(this).data('id');
        $('#' + divId).show();
    });

    $('a.floorplan.initial').trigger('mouseenter');    
});

The trigger() method allows you to simulate an event and reuse the logic that is already set for the links.

Upvotes: 1

Vince
Vince

Reputation: 3286

Here's what I would do:

HTML

<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>

CSS

.floorplan-details:not(.initial) {
    display: none;
}

jQuery on ready function

$(".floorplan").hover(function () {
    var data_id = $(this).data('id');

    // Shows the hovered floorplan, hides others
    $('.floorplan-details').each(function() {
        var el = $(this);

        if(el.attr('id') == data_id)
            el.show();
        else
            el.hide();
    });
});

Notice I moved the initial class to the div. The css selector matches any div with class floorplan-details that doesn't also have class initial. This seems a more elegant way of showing the initial floorplan on page load.

jsFiddle: http://jsfiddle.net/voveson/oxdg3bwf/1/

Upvotes: 2

Related Questions