title: How to select a nested button inside a list?
body: <p>I am trying to create a button that toggles a container 
  I currently have it working where if a user clicks anywhere on the header the container will toggle, but I want the click function to be working on a button that is nested inside a list which is inside the header.</p>
  
  <p>Currently the code only works by selecting the header. I want it to work only when the user clicks the toggle button. I have tried <code>$("button").click</code> <code>$(".projectHeader &gt; button")</code> I have also tried selecting using <code>parent().children()</code></p>
  
  <p>can someone help me understand how i can select the toggle button on the click function? I have tried several things and I am pretty stuck, below is the jquery and here is a link to jsfiddle. Any help is greatly appreciated.</p>
  
  <p><a href="http://jsfiddle.net/2o0wx8x4/" rel="nofollow">http://jsfiddle.net/2o0wx8x4/</a></p>
  
  <pre><code>   &lt;script type="text/javascript"&gt;
  
          $(document).ready(function()
          {  
              console.log('page has loaded');
            $(".projectHeader").click(function()
            {
              console.log('button was clicked');
              $(this).next('.tableContainer').slideToggle("slow");
               $(this).parent().siblings().children().next().slideUp();
               return false;
              console.log('the table container closed');
            });
          });
      &lt;/script&gt;
              &lt;div class="projectWrapper"&gt;
                  &lt;div class="projectHeader"&gt;
                      &lt;ul&gt;
                          &lt;li&gt; &lt;button id="toggleButton"&gt;Toggle&lt;/button&gt; &lt;/li&gt;
                          &lt;li&gt; Project Name &lt;/li&gt;
                          &lt;li&gt; Status &lt;/li&gt;
                          &lt;li&gt; Budget &lt;/li&gt;
                          &lt;li&gt; Client Req Start Date &lt;/li&gt;
                          &lt;li&gt; Project Start Date &lt;/li&gt;
                          &lt;li&gt; &lt;a href="#"&gt;Show All&lt;/a&gt; &lt;/li&gt;
                          &lt;li&gt; can be staffed () &lt;/li&gt;
                      &lt;/ul&gt;   
                  &lt;/div&gt;
                  &lt;div class="tableContainer"&gt; table goes in here&lt;/div&gt;
               &lt;/div&gt;
  </code></pre>