Drop down menu items behavior

Question

Hi I'm working on a MVC application that has a drop down menu in it, and the items in this drop down are fetched from the DB via a foreach.

foreach (Category item in Model.CategoriesV){    
<input type="submit" class="dropdown-item" id="Show" 
value="@item.CategoriesName" name="CategName" />
 }

I get 3 results from this for each (Mobiles-Consoles-Tablets), I have another div that contains an image gallery. I used this code to hide this gallery once I click on an item in the drop down menu. Here's the image galley(I put it in a Partial View)

<div id="ImageGalleryDiv">
@Html.Partial("_ImageGallery", Model)
</div>

And here's the script that I used to hide the gallery once I click on drop down items list.

 <script>
 $(document).ready(function () {
 $('#Show').click(function () {
 $('#ImageGalleryDiv').hide("100");
 });
 });

Everything is working fine when I click on Mobiles (the first item in the drop down),the others items aren't working. Any help would be appreciated.

If you check your browser console i think you may have more than one element having id as `Show` .... So the other two elements won't be picked by `click` event — Anirudh Mangalvedhekar, Dec 21 '18 at 14:22
yeah you're right,how can I give each element an Id with the same for each — Alaa Hershey, Dec 21 '18 at 14:24
id's should always be unique. what you can do though is collect the elements with same class name and then for each of those elements bind click event to hide — Anirudh Mangalvedhekar, Dec 21 '18 at 14:29

Mihai T · Accepted Answer · 2018-12-21T14:46:29.207

id should be unique. That is it's purpose. Uniquely identifying an element. You are not allowed to use duplicate id's on a page. It can result in unwanted behavior like you are experiencing now. Basically, jQuery gets the first element that it finds with the id and then ignores all the other. Also in plain javaScript we not not have a getElementsById method but getElementById.

Read more about it here -> Why are duplicate ids not allowed in HTML

So you can use a class instead.

Also, class and id should be lowercase and dash separated string-string ( if the consist of multiple words ) , not camelCase.

See example below

const categories = ['Mobiles', 'Consoles', 'Tablets']


categories.forEach(categ => {
  const input = `<input type="submit" class="dropdown-item show" id="show-${categ}" value=${categ} name=${categ} />`
  $('#categories').append(input);
});

$('.show').click(function() {
  $('#image-gallery-div').hide("100");
});

#image-gallery-div {
  height: 100px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="categories">

</div>
<div id="image-gallery-div">

</div>

Drop down menu items behavior

1 Answers1