title: jquery button click to act on specific div children
body: <p>I have a set of buttons, when they're clicked I want the first child to have the css display none, and the second child to have the css display block, for all of the buttons, it's not quite working, this is what I have.</p>
  
  <p>JS:</p>
  
  <pre><code>$(".btn").click(function () {
    $(".btn:nth-child(2)").css ({
      display: "none"
    });
    $(".btn:nth-child(1)").css ({
      display: "block"
    });  
  });
  </code></pre>
  
  <p>the structure of the .btn </p>
  
  <pre><code>&lt;div id="bow" class="btn" data-filter=".bow"&gt;
    &lt;img class="filter_icon" src="http://www.klossal.com/klossviolins/icons/bow_icon.png" alt=""&gt;
    &lt;img class="filter_icon not_selected" src="http://www.klossal.com/klossviolins/icons/bow_icon_selected.png" alt=""&gt;  
  &lt;/div&gt;
  </code></pre>