CODEWITHSUNDEEP
javascriptjquery
Jacob
Jacob

Reputation: 6487

How to show a nested div on hover? -- JQuery beginner

I have a long list of HTML in this format:

<div id="item555">
    Some name
    <a href="">show details</a>
    <a href="" id="button555">Action</a>
</div>
<div id="details555">
    Some details
</div>

I can't figure out how to:

  1. Show the Action button only when the item div is hovered.
  2. Show the Details box when the Show details link is clicked.

I know this is really basic js stuff! :(

Upvotes: 2

Views: 1446

Answers (6)

Rory McCrossan
Rory McCrossan

Reputation: 337714

I've made a few amendments to your javascript, HTML and CSS, here's a fiddle with everything working.

I also made sure the code is not broken by having repeated elements.

JS

$(".item-container").hover(
    function() {
        $(".action", this).show()
    },
    function() {
        $(".action", this).hide()        
    }
);

$(".details").click(function(e) {
    e.preventDefault();
    var detailsDiv = $(this).parent().next("DIV");
    detailsDiv.toggle();
    if (detailsDiv.is(":visible")) {
       $(this).text("Hide details")   
    }
    else {
       $(this).text("Show details")   
    }
});

CSS

.action, .details-container { display: none; }

Upvotes: 1

mprabhat
mprabhat

Reputation: 20323

You can try with having different class attached to your elements. Hope this code helps

<html>
    <head>
    <title>Test Show Hide Div</title>
    <script src="jquery.1.6.1.min.js"></script>
    <style>
      .item {
      color: red;
      }

     .anchorDetails {
      color: green;
      }

     .anchorAction {
     color: blue;
     display: none;
      }

     .noDisplay {
     display: none;
      }
   </style>
  <script type="text/javascript">
$(document).ready(function() {

    $('.item').hover(function() {
        $('.noDisplay').toggle();
    });

    $('.anchorDetails').click(function() {
        $('.anchorAction').toggle();
    });
});
</script>
</head>
<body>
<div id="item555" class="item">
    Some name <a href="#" class="anchorDetails">show details</a> <a
        href="#" class="anchorAction" id="button555">Action</a>
</div>
<div id="details555" class="noDisplay">Some details</div>
</body>
</html>

Upvotes: 1

GregM
GregM

Reputation: 2654

You could use the .hover function

with the toggle()

Look at this fiddle :

http://jsfiddle.net/ADLLR/

Upvotes: 0

karim79
karim79

Reputation: 342755

<div id="item555">
  Some name
  <a href="" class="showDetails">show details</a>
  <a href="" id="button555" style="display:none" class="action">Action</a>
</div>
<div id="details555" style="display:none">
  Some details
</div>

$("div[id^='item']").hover(function() {
    $(this).find(".action").toggle();
}).delegate(".showDetails", "click", function(e) {
    e.preventDefault();
    $(this).parent().next("div").toggle();  
});

Demo.

Upvotes: 0

Nemoden
Nemoden

Reputation: 9056

$('div#item555').hover(function() { $('a#button555').show(); })

You should here specify a classname or, better, an ID for show details, you could do it inline though. But, assume, it's id is 'show-detail':

$('a#show-detail').click(function() { $('div#details555).show() });

Please, notice, I've used tag#id to increase performance. jQuery selects elements a way much faster if you specify tagname. If you are using an ID, it is not that big deal, but if you use $('.classname') selector and you know all your .classname are divs, it's much better to use $('div.classname')

P.S. if you are looking for more generic way, you probably better look at other answers.

Upvotes: 0

Filip
Filip

Reputation: 2522

First of all, I updated your markup a bit:

<div id="item555" class="item">
    Some name
    <a href="" class="show-details">show details</a>
    <a href="" id="button555" class="action-button">Action</a>
</div>
<div id="details555" class="details">
    Some details
</div>

Then I would use something like this in jQuery.

$('.show-details').click(function() {
    $(this).parent('div').next('div.details').show();
});

$('.item').hover(function() {
    $(this).find('.action-button').show();
}, function();

Upvotes: 1

Related Questions