anujsharma9196 anujsharma9196 - 4 months ago 19
jQuery Question

hide div which not contain class using jquery

I want to switch div on hover on

li
element.

My li element looks like

<ul>
<li id="id1" onmouseover="subDivision(this.id)">first line</li>
<li id="id2" onmouseover="subDivision(this.id)">second line</li>
<li id="id3" onmouseover="subDivision(this.id)">third line</li>
</ul>

<div class="submenu id1">
First division
</div>
<div class="submenu id2">
Second division
</div>
<div class="submenu id3">
third division
</div>


jQuery code :

<script>
$('.submenu').hide();
function subDivision(divId) {
$('.'+divId).show();
$('.submenu not(.'+divId+')').hide();
}
</script>


I want to show
div
with class as passed
id
and hide all
div
under
.submenu
div which does not contain passed
id
.

But this is not hiding
div
and showing all division after another without hiding previous one.

Answer

You can use addClass & removeClass to show the div of concern on hovering li

function subDivision(divId) {
         $('.submenu').removeClass('showElem').addClass('hideElem');
          $('.'+divId).addClass('showElem');
    }

JSFIDDLE