jquery siblings how to remove class?

Question

I have the following jQuery:

<script type="text/javascript">
$('.showFood').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetFood').hide();
    $('#food' + $(this).data('target')).show(function() {
        $('#food' + $(this).data('target')).toggle("slide");
    });
});
$('.showFood').first().click();
</script>

The following HTML:

<ul class="menus-nav">
<li><a href="#menu1" class="showFood" data-target="1">Menu 1</a></li>
<li><a href="#menu2" class="showFood" data-target="2">Menu 2</a></li>
<li><a href="#menu3" class="showFood" data-target="3">Menu 3</a></li>
</ul>
<div id="food1" class="targetFood">
<p>Items from menu 1</p>
</div>

<div id="food2" class="targetFood">
<p>Items from menu 2</p>
</div>

<div id="food3" class="targetFood">
<p>Items from menu 3</p>
</div>

Everything works fine except when you navigate through the menus it won't remove the selected class and once you click all menus they all have the class selected.

I don't have a great experience in javascript or jquery, any chance some of you guys could give me some help please?

Note: the html has been reduced for demo purpose.

Fiddle

Solution 1

you can try

$('.showFood').on('click', function () {
$('.showFood').removeClass('selected');// here remove class selected from all showfood
    $(this).addClass('selected');// here apply selected class on clickable showfood
    $('.targetFood').hide();
    $('#food' + $(this).data('target')).show(function() {
        $('#food' + $(this).data('target')).toggle("slide");
    });
});

Solution 2

This line of code might be your problem:

$(this).addClass('selected').siblings().removeClass('selected');

You probably want to delete the classes first, then add it to the selected element:

$('.selected').removeClass('selected'); // remove all current selections
$(this).addClass('selected')            // select this element

Solution 3

Use

$('.showFood').on('click', function () {
$('.showFood').removeClass('selected'); //remove selected class from all elements with class showFood
    $(this).addClass('selected')
    $('.targetFood').hide();
    $('#food' + $(this).data('target')).show(function() {
        $('#food' + $(this).data('target')).toggle("slide");
    });
});

Solution 4

if you have jQuery 1.7+ you should probably

Change:

$('.showFood').on('click', function () {
    //YOUR CODES HERE
})

To

$(document).on('click', '.showFood', function () {
    //YOUR CODES HERE
})

View more solutions