I am trying to add class to mainmenu div, but for some reason it add class to both the div, the div has same class, i only wanted to add class to selected div.
<div class="main-coloumn">
<div id="col1">
<div class="hidden">hidden text</div>
</div>
<div id="col2" class="class">
<div class="menubox">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
<div class="menubox">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
</div>
<div id="col3" class="class">
<div class="mainmenu">
<div class="menubox">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
</div>
<div class="mainmenu">
<div class="menubox">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
</div>
</div>
</div>
This is my JQUERY code.
(function($) {
$( document ).ready( function() {
$('.menubox .toggleClass').hover(function () {
// fade in the div in this object.
$(this).closest('.main-coloumn').find('.class .mainmenu').toggleClass('class_name');
});
});
}(jQuery));