Question

I have attached a snippet of my HTML.

Is it possible if I hover over the hyperlink with ID li1link that div#li1 is displayed, and if I hover over the hyperlink with ID li2link then div#li2 is displayed. Is this easily achievable?

So I guess the default is the DIVs are set to display:hidden until that particular related link is hovered over/active.

To confirm, only one DIV will be visible at any time.

Here is my current HTML:

    <ul>
        <li><a href="#li1" id=li1link">Test 1 - hover over to display ul#li1</a></li>
        <li><a href="#li2" id=li2link">Test 2 - hover over to display ul#li2</a></li>
    </ul>

    <div id="li1">
    <ul>
        <li>Content 1</li>
        <li>Content 1</li>
    </ul>
    </div>
    <div id="li2">
        <ul>
            <li>Content 2</li>
            <li>Content 2</li>
        </ul>
    </div>

I’m open to using jQuery or CSS, I’m just not totally sure how to approach this issue. Confused is an understatement.

Many thanks for any pointers with this.

Answer 1

You could try:

// for all links that have link keyword in their ids
$('a[id*="link"]').mouseenter(function(){
  // get the div id out of this
  var id = this.id.replace('link', '');
  // hide all other divs
  $('div[id^="li"]').hide();
  // show the needed div now
  $('#' + id).show();
});

// hide when mouse moves away
$('a[id*="link"]').mouseout(function(){
  var id = this.id.replace('link', '');
  $('#' + id).hide();
});

To confirm, only one DIV will be visible at any time.

These lines take care of that:

$('div[id^="li"]').hide();
// show the needed div now
$('#' + id).show();