CODEWITHSUNDEEP
javascripthtmljquerycss
mohammadho
mohammadho

Reputation: 5

changing display of some divs by clicking on li

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>

Upvotes: 0

Views: 101

Answers (2)

isherwood
isherwood

Reputation: 61082

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>

Upvotes: 1

AKX
AKX

Reputation: 169267

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>

Upvotes: 1

Related Questions