Toggle visibility of div content when hovering over a link by leveraging the data attribute, with the div initially visible

Question

Toggle visibility of div content when hovering over a link by leveraging the data attribute, with the div initially visible

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!

javascript jquery html css

Answer 1

Answer №1

My approach would be as follows:

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

Using 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();
    });
});

The adjustment made here is transferring the initial class to the div. This way, the CSS selector targets any div with the class floorplan-details that does not have the class initial as well. It makes displaying the initial floorplan upon page load more streamlined and elegant.

Link to jsFiddle example: http://jsfiddle.net/voveson/oxdg3bwf/1/

Answer 2

My approach would be as follows:

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

Using 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();
    });
});

The adjustment made here is transferring the initial class to the div. This way, the CSS selector targets any div with the class floorplan-details that does not have the class initial as well. It makes displaying the initial floorplan upon page load more streamlined and elegant.

Link to jsFiddle example: http://jsfiddle.net/voveson/oxdg3bwf/1/

Answer 3

Answer №2

Let's streamline the HTML for better comprehension.

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

To enhance efficiency, recommend applying display: none directly to the content div, combined with this Javascript code snippet:

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

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

By utilizing the trigger() method, you can simulate events and utilize existing link logic seamlessly.

Answer 4

Let's streamline the HTML for better comprehension.

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

To enhance efficiency, recommend applying display: none directly to the content div, combined with this Javascript code snippet:

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

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

By utilizing the trigger() method, you can simulate events and utilize existing link logic seamlessly.

Answer 5

Answer №3

Although the html organization could use some revision, in the event that we were to work with the existing structure provided by you, my approach would be:

$(function() {
  var currentId = $(".initial").data('id');
  displayElement(currentId);

   $(".floorplan").hover(function() {
     concealElement(currentId);
     displayElement(this.dataset.id);
     currentId = this.dataset.id;
   });

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

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

});

Answer 6

Although the html organization could use some revision, in the event that we were to work with the existing structure provided by you, my approach would be:

$(function() {
  var currentId = $(".initial").data('id');
  displayElement(currentId);

   $(".floorplan").hover(function() {
     concealElement(currentId);
     displayElement(this.dataset.id);
     currentId = this.dataset.id;
   });

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

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

});

Toggle visibility of div content when hovering over a link by leveraging the data attribute, with the div initially visible

Answer №1

HTML

CSS

Using jQuery on ready function

Answer №2

Answer №3

Similar questions

Explore the possibility of utilizing Excel VBA to locate images from websites and seamlessly import them into

Emphasizing sections using a specific class for paragraph highlighting

The reason for the failure of the web API is due to the incorporation of the original controller's name by

The PHP script encountered an issue with the HTTP response code while processing the AJAX contact form, specifically

Styling in Next.js with conditions

In what ways can you shut down an electron application using JavaScript?

Using the same function in two different locations will only work for one instance

The issue with Bootstrap Vue scrollspy arises when trying to apply it to dynamic data. Upon closer inspection, it becomes evident that the elements are activating and highlighting one by

Transmit information from a JavaScript AJAX function to a JSP page

Unusual CSS rendering hiccup

How can I use jQuery to slide up and slide down divs that share the same class?

Efficiently Minimize Bootstrap Components Upon Clicking the Link

Participating in a scheduled Discord Voice chat session

Determining the victorious player in a game of Blackjack

Events Unavailable for Viewing - Full Calendar - Database Error Encountered

Guide on how to smoothly navigate through an HTML page to a specific anchor point

What is the best way to change a JavaScript variable into a PHP variable?

Sinon respects my intern functions during testing in ExpressJS

Tips for establishing a fixed point at which divs cease to shrink as the browser size decreases

Error on JSP Hello Page