CODEWITHSUNDEEP
javascript
Mariusz Głuch
Mariusz Głuch

Reputation: 19

Show/Hide javascript only one item

I made a blog on wordpress and must make a dynamic posts. I made this 

<div class="box">
    <span class="hide">Hide</span>
<span class="share" style="display:none">Show</span>
</div>
<div class="box">
    <span class="hide">Hide</span>
<span class="share" style="display:none">Show</span>
</div>
<div class="box">
    <span class="hide">Hide</span>
<span class="share" style="display:none">Show</span>
</div>
<div class="box">
    <span class="hide">Hide</span>
<span class="share" style="display:none">Show</span>
</div>
<div class="box">
    <span class="hide">Hide</span>
<span class="share" style="display:none">Show</span>
</div>
<div class="box">
    <span class="hide">Hide</span>
<span class="share" style="display:none">Show</span>
</div>

<scritp>
$( ".box" ).hover(

    function() {
      $(".hide").hide();
      $(".share").show();
}, function() {
      $(".hide").show();
      $(".share").hide();
});

</script>
.hide, .share {
    display:block;
    background-color: #A85BA5;
    padding: 30px;
    margin-bottom: 30px;
    color: #fff;
    text-align: center;
}

This is a notworking example http://jsfiddle.net/s59bu5xn/8/ and i want only one item change hide on show. Not globaly all item on homepage this blog.

Best regards, M

Upvotes: 0

Views: 31

Answers (1)

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

Try like this

$( ".box" ).hover(

    function() {
       $(this).find(".hide").hide();
      $(this).find(".share").show();
}, function() {
      $(this).find(".hide").show();
      $(this).find(".share").hide();
});

JSFIDDLE

Upvotes: 1

Related Questions