ToggleClass Current Target

by Apple Ilagan

HTML

<div data-product_id="001"><h1>Clcike me1</h1> <div class="nonvisible">Hello Wordld</div></div>
<div id="matchItem122"><h1>Clcike me122</h1> <div class="nonvisible">Hello Wordld</div></div>

<div class="matchItem123"><h1>Clcike the same class</h1> <div class="nonvisible">Hello Wordld</div></div>
<div class="matchItem123"><h1>Clcike the same class</h1> <div class="nonvisible">Hello 
Wordld</div></div>

<div class="item"><h1>Clcike the same class 1</h1> <div class="nonvisible">Hello Wordld</div></div>

<div class="item"><h1>Clcike the same class 2</h1> <div class="nonvisible">Hello Wordld</div></div>

<div class="clickitem"><h1>Clcike the same class 2</h1> <div class="nonvisible">Hello Wordld</div></div>

<div class="clickitem"><h1>Clcike the same class 2</h1> <div class="nonvisible">Hello Wordld</div></div>

CSS

.nonvisible{display:none;}
.visible{display:block;}

JavaScript

$("div[data-product_id^='']").hover(function (e) {
    // do something
    $(e.currentTarget).find(".nonvisible").toggleClass("visible");
});


$("div[class^='matchItem']").hover(function (e) {
    // do something
    $(e.currentTarget).find(".nonvisible").toggleClass("visible");
});

$(".item").hover(function (e) {
    // do something
    $(e.currentTarget).find(".nonvisible").toggleClass("visible");
});

$(".clickitem").hover(function (e) {
    // do something
    $(e.currentTarget).find(".nonvisible").toggleClass("visible");
});