Hide & show multiple links on a page using jquery

Question

I am working on a product shortlist feature. I have grid view for each product & I have provided a shortlist link for each of the grid cell. Now I want to hide all these links in each cell initially on page load & show a specific link within the cell when a user hovers on that particular cell and again hide that link when user moves the cursor out of the cell. This cell is nothing but a div.

The shortlist link is within a div having the class product-grid-item.This div is nothing but a grid cell on which I want to hover. Actually using toggle function I am able to show/hide the shortlist link, but my code is generating multiple grid cells i,e div so when i hover on a particular grid the link is getting displayed but it also display all the links within the other grids as well.I just only want to show the particular link within the grid on which user hovers not all the links within the other grid cells.

How can I achieve this using jQuery? This is my code:

<?php foreach ($products as $index=>$product):?>
  <div class="product-grid-item grid-cell">
    <div class="shortlist" style="display: none; float:right;">
    <?php
      echo CHtml::ajaxLink('<i class="fa fa-star"></i> Shortlist',Yii::app()->createUrl('productshortlist/shortlistproduct'),
        array('data'=>array('productId' => $product->product_id),
        'dataType'=>'text',
        'type'=>'get',
        'success'=>'function(result)
                    {
                      if(result == "Success")
                      {
                        alert("Product Added to the shortlist successfully.");
                        $("#shortlistedProduct").prop("disabled",true);
                      }
                      else
                        $("#shortlist_product_error").html(result);
                      }'),
        array('id'=>'shortlistedProduct'.$index)
      );
    ?>
    </div>
  </div>
<?php endforeach;?>

Output:

 <a id="shortlistedProduct0" href="#"><i class="fa fa-star"></i> Shortlist</a> 
 <a id="shortlistedProduct1" href="#"><i class="fa fa-star"></i> Shortlist</a>

Suggested but not working script:

<script>
    $(".product-grid-item").hover(function()
    {
        $(".shortlist").toggle();
    }
   );
</script>

Hi and welcome to SO. Please take a minute and read the [help] to see how to ask questions here. Hint: We want to see HTML and CODE. Other hint: Read the jQuery docs on [.hide()](http://api.jquery.com/hide/) and [.show()](http://api.jquery.com/show/) — mplungjan, May 30 '15 at 18:40
Please add the GENERATED HTML. This is a jQuery question, not a PHP question - If you click the code snippet icon you can format the question with html and jQuery — mplungjan, May 31 '15 at 05:50
Actually that PHP code generates a normal hyperlink and using foreach loop it generates multiple hyperlinks with different ids.Something like this: Shortlist Shortlist and so on. — Prashant Tikone, May 31 '15 at 05:56
So add that to the question instead of having us do PHP rendering in our heads.. Where is the link near the list that you want to hover? — mplungjan, May 31 '15 at 06:04
If you add the link or text to hover, and include jQuery, your code works: https://jsfiddle.net/mplungjan/yb8e39zy/ — mplungjan, May 31 '15 at 06:23
The shortlist link is within a div having the class product-grid-item.This div is nothing but a grid cell on which I want to hover.Actually using toggle function I am able to show/hide the shortlist link, but my code is generating multiple grid cells i,e div so when i hover on a particular grid the link is getting displayed but it also display all the links within the other grids as well.I just only want to show the particular link within the grid on which user hovers not all the links within the other grid cells. — Prashant Tikone, May 31 '15 at 06:23
Why don't you suggest him the css solution with hover. Instead of toggleing, can we add a css to the outher div to show inner div on hover? — Hovo, May 31 '15 at 10:39

Hovo · Answer 1 · 2015-05-31T16:24:42.303

2

Try to add a css for the div-s to show or hide the links using the hover css selector - http://www.w3schools.com/cssref/sel_hover.asp

I still think that even if you can't solve this by adding css hover selector for your product-grid-item div to show shortlist div, then use jQuery only to add htat css instead of jQuery toggle() or jQuery hover().

edited May 31 '15 at 16:24

answered May 30 '15 at 18:50

Hovo

790
4
21

Poor reference. Here are examples http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css – mplungjan May 30 '15 at 18:55
Thanks for your reply.Below is my code – Prashant Tikone May 31 '15 at 05:14
Hello Hovo. Thanks for the reply I have added the HTML code & script.Hope you will understand my question now. – Prashant Tikone May 31 '15 at 05:35

Bilal Maqsood · Answer 2 · 2015-05-31T06:23:13.437

0

Make sure you have included jQuery if yes then try this code

<script>
$(document).ready(function() {


    $(".product-grid-item").hover(function()
    {
        $(".shortlist").toggle();
    }
   );
});

</script>

edited May 31 '15 at 06:23

answered May 31 '15 at 06:09

Bilal Maqsood

1,163
3
15
43

@mplungjan please explain what you want?? – Bilal Maqsood May 31 '15 at 06:13
I was mistaken. Your code works if there is content to hover over in the div (the link not shown in OPs code) - like this https://jsfiddle.net/mplungjan/yb8e39zy/ – mplungjan May 31 '15 at 06:15
@mplungjan make sure you did not put `` to `display: none` in css or jquery – Bilal Maqsood May 31 '15 at 06:18
I wrongly expected a hover with only one statement to toggle (show) when hovered and then toggle(hide) again when hovered again. So I was thinking you needed mouseenter and out to show/hide, but you do not. It works with toggle alone – mplungjan May 31 '15 at 06:19
PS: The shortlist is display none in his code so no need to hide from jQuery – mplungjan May 31 '15 at 06:22

score 0 · Accepted Answer · answered May 31 '15 at 06:26

Now with all your information available to us, we can finally answer your question

$(function () {
    $(".product-grid-item").hover(function () {
        $(this).find(".shortlist").toggle();
    });
});

.shortlist {display: none; float:right;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="product-grid-item grid-cell">Hover on me
    <div class="shortlist">
        <a id="shortlistedProduct0" href="#"><i class="fa fa-star"></i> Shortlist</a>
        <a id="shortlistedProduct1" href="#"><i class="fa fa-star"></i> Shortlist</a>
    </div>
</div>
<div class="product-grid-item grid-cell">Hover on me
    <div class="shortlist">
        <a id="shortlistedProduct0" href="#"><i class="fa fa-star"></i> Shortlist</a>
        <a id="shortlistedProduct1" href="#"><i class="fa fa-star"></i> Shortlist</a>
    </div>
</div>

Thanks a lot sir.Now this code is working fine for me.Thank you for your time & patience. :) — Prashant Tikone, May 31 '15 at 06:38

Hide & show multiple links on a page using jquery

3 Answers3