title: show/hide child elements of <li> with javascript
body: <p>I have a razor loop on my .cshtml page in my mvc 4 project and I need to show hide the children of a list within this razor loop.
  The code works for the first element but not for the rest.</p>
  <p>.cshtml code</p>
  <pre><code>&lt;ol&gt;
      @foreach (var Name in (List&lt;string&gt;)ViewData[&quot;Names&quot;])
      {
          &lt;li onclick=&quot;makevisible();&quot; ondblclick=&quot;makeinvisible();&quot;&gt;
              @Name
              &lt;ul id=&quot;list&quot; class=&quot;list&quot;&gt;
                  &lt;li&gt;childWichNeedsToBeHidden&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      }
  &lt;/ol&gt;
  </code></pre>
  <p>My javascript:
  <code>function makevisible() {$('#list').show();}</code>
  and:
  <code>function makeinvisible() {$('#list').hide();}</code></p>
  <p>My css: <code>.list {display:none;}</code></p>
  <h1>EDIT</h1>
  <p>my new .cshtml code</p>
  <pre><code>    @{
        int i = 0;
        foreach (var Name in (List&lt;string&gt;)ViewData[&quot;Names&quot;])
        {
            i++;
            &lt;li onclick=&quot;makevisible();&quot; ondblclick=&quot;makeinvisible();&quot;&gt;
              @Name
               &lt;ul class=&quot;list&quot; id=&quot;@i&quot;&gt;
                  &lt;li&gt;childWichNeedsToBeHidden&lt;/li&gt;
               &lt;/ul&gt;
            &lt;/li&gt;
        }
      }
  </code></pre>
  <p>So now each ul has a unique id. But I do not know what my javascript should be.
  I can show hide a specific child ul like the third one with:</p>
  <pre><code>        function makevisible() {
              $('#3').show();
          }
          function makeinvisible() {
              $('#3').hide();
          }
  </code></pre>
  <p>how do I make the #3 a variable so that i can show hide any child ul i want?</p>