jquery - Toggle dropdown for each @item -


I need the code below to toggle on @item ["name"]. But instead of once Displays a dropdown for all items (5 entries).

How can I change it?

  & lt; Script & gt; $ (Document) .ready (function () {$ (".name") Click (function () {$ (". Dropdown"). FadeToggle ("slow");});}); & Lt; / Script & gt;  

Table:

  & lt; Table class = "diag" style = "background: url ('.png'); boundary: none" & gt; & Lt; Tbody & gt; @Fouranchatch (Miscellaneous items in model. Model) {@: & lt; Tr & gt; & Lt; Td square = "picture" & gt; & Lt; Img src = "@ item [" image "]" /> & Lt; / TD & gt; & Lt; Td class = "name" & gt; @ Etem ["name"]  & Lt; Td square = "dropdown" & gt; & Lt; Ul & gt; & Lt; Li & gt; Option 1 & lt; / Li & gt; & Lt; Li & gt; Option 2 & lt; / Li & gt; & Lt; Li & gt; Option 3 & lt; / Li & gt; & Lt; Li & gt; Option 4 & lt; / Li & gt; & Lt; Li & gt; Option 5 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / TD & gt; @: & Lt; / TR & gt; } & Lt; / Tbody & gt; & Lt; / Table & gt; It's toggling all 5 because the name of the same class in all 5 options list is "dropdown", so that you click on any name because it is and they will toggle all 

a quick To decide, use the context of the click so that you know which option list show / hide

  $ (document) .ready (function () {$ ("dropdown" Click (Hide); $ (".name") (function () {$ (this) .next (". Dropdown"). FadeToggle ("slow");});}); 

Edit:

Below is the initial hide hide based on the comment.

Comments