i have a menu i have some divs and i want change the display of my divs to none execpt the div which is related to the menu item that is clicked. i wrote some codes but it didnt work and changed all of my divs display to none here is my codes
var myValue, number, newArray;
var myArray = [1, 2, 3, 4, 5, 6];
$(".BreakfastLi").click(function() {
myValue = 1;
})
$(".LunchLi").click(function() {
myValue = 2;
})
$(".DinnerLi").click(function() {
myValue = 3;
})
$(".DesertLi").click(function() {
myValue = 4;
})
$(".SoupLi").click(function() {
myValue = 5;
})
$(".DrinkLi").click(function() {
myValue = 6;
})
for (var i = 0; i < 6; i++) {
newArray = myArray.filter(num => num !== myValue);
number = newArray[i];
$(".group" + number).addClass("d-none");
}.d-none {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="foodMenu">
<li class="BreakfastLi">Breakfast</li>
<li class="LunchLi">Lunch</li>
<li class="DinnerLi">Dinner</li>
<li class="DesertLi">Desert</li>
<li class="SoupLi">Soups</li>
<li class="DrinkLi">Drinks</li>
</ul>
<div class="group1">some content</div>
<div class="group2">some content</div>
<div class="group3">some content</div>
<div class="group4">some content</div>
<div class="group5">some content</div>
<div class="group6">some content</div>You'll want the show/hide code to run on each click. You don't really need myValue or myArray at all though.
function showGroup(i) {
$(".group").addClass("d-none"); // hide all groups
$("#group" + i).removeClass("d-none"); // show selected group
}
$(".BreakfastLi").click(function() {
showGroup(1);
})
$(".LunchLi").click(function() {
showGroup(2);
})
$(".DinnerLi").click(function() {
showGroup(3);
})
$(".DesertLi").click(function() {
showGroup(4);
})
$(".SoupLi").click(function() {
showGroup(5);
})
$(".DrinkLi").click(function() {
showGroup(6);
});
showGroup(0); // hide everything by default.d-none {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="foodMenu">
<li class="BreakfastLi">Breakfast</li>
<li class="LunchLi">Lunch</li>
<li class="DinnerLi">Dinner</li>
<li class="DesertLi">Desert</li>
<li class="SoupLi">Soups</li>
<li class="DrinkLi">Drinks</li>
</ul>
<div class="group" id="group1">some content 1</div>
<div class="group" id="group2">some content 2</div>
<div class="group" id="group3">some content 3</div>
<div class="group" id="group4">some content 4</div>
<div class="group" id="group5">some content 5</div>
<div class="group" id="group6">some content 6</div>AKX got you on the right track, but classes are intended to be sets of like things. Let's use one and element index to vastly simplify.
The caveat with this is that the quantity and order of the group elements needs to correspond to the list items, but that's a common strategy and is less fragile than managing what amounts to a bunch of arbitrary ID values.
function showGroup(i) {
$(".group").addClass("d-none"); // hide all groups
if (i !== null) {
$(".group").eq(i).removeClass("d-none"); // show selected group
}
}
$(".meal").click(function() {
showGroup($(this).index());
})
showGroup(); // hide everything by default.d-none {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="foodMenu">
<li class="meal">Breakfast</li>
<li class="meal">Lunch</li>
<li class="meal">Dinner</li>
<li class="meal">Desert</li>
<li class="meal">Soups</li>
<li class="meal">Drinks</li>
</ul>
<div class="group">some Breakfast content</div>
<div class="group">some Lunch content</div>
<div class="group">some Dinner content</div>
<div class="group">some Desert content</div>
<div class="group">some Soups content</div>
<div class="group">some Drinks content</div>