remove class add class not working

Question

i have created two separate classes for li which contains up & down arrows background image.

html

<ul class="menu">
<li class="main">Menu 1
<ul class="submenu">
<li class="submenu_item">Sub menu 1</li>
<li class="submenu_item">Sub menu 2</li>
<li class="submenu_item">Sub menu 3</li>
</ul>
</li>

<li class="main">Menu 2
<ul class="submenu">
<li class="submenu_item">Sub menu 1</li>
<li class="submenu_item">Sub menu 2</li>
<li class="submenu_item">Sub menu 3</li>
</ul>
</li>
</ul>

css

li.main
{display:block;
background:#06C url(insert.png) top right no-repeat;
margin-top:1%;
}

.remove
{display:block;
background:#06C url(remove.GIF) top right no-repeat;
margin-top:1%;
}

script

$(".main:eq(0)").click(function () {
    $(".submenu:eq(0)").slideToggle(400);
    $(this).toggleClass("main remove");
    $(".submenu:eq(1)").slideUp(400);
});

$(".main:eq(1)").click(function () {
    $(".submenu:eq(1)").slideToggle(400);
    $(this).toggleClass("main remove");
    $(".submenu:eq(0)").slideUp(400);
});

when i clicked on the li i needed the class will change but if i again click on menu1 menu 2 class also has to be changed.

Answer 1

If you want to make it act like an accordion, you can do like this:

$('.main').click(function() {
    $(this).toggleClass("main remove").find('.submenu').slideToggle(400);
    $(this).closest('li').siblings('.main').find('.submenu').slideUp(400);
})

Fiddle Demo

---

I think you don't need to slideUp the other .main when one .main clicked, so just use:

$('.main').click(function() {
    $(this).toggleClass("main remove").find('.submenu').slideToggle(400);
})

Demo

Answer 2

use :first or and .eq()

$(".main").eq(0)

and toggle class if you have main on <li class="main"> only apply .remove please change it to other class