title: Click one div in order to open only it's children and not other with same class
body: <p>So I tried obviously using $('this .classname') but it toggle closes the whole div.
  I'm trying to have each div (image is placed) be clicked and only it's ul be opened.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="col-md-12 col-xs-12"&gt;
  
      &lt;div class="recipePicContainer"&gt;
          &lt;div id="checkBoxes"&gt;
                  &lt;li class="recipe" id="recipe01"&gt;&lt;label&gt;Cocktail&lt;/label&gt;&lt;/li&gt;
                         &lt;ul class="recipes"&gt;
                             &lt;li class="ingredient"&gt;&lt;input type="checkbox"&gt; ingredient 1&lt;/li&gt;
                             &lt;li class="ingredient"&gt;&lt;input type="checkbox"&gt; ingredient 2&lt;/li&gt;
                             &lt;li class="ingredient"&gt;&lt;input type="checkbox"&gt; ingredient 3&lt;/li&gt;
                             &lt;li class="ingredient"&gt;&lt;input type="checkbox"&gt; ingredient 4&lt;/li&gt;
                              &lt;li class="instructions"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/li&gt;
                         &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;div class="recipePicContainer"&gt;
              &lt;div class="checkBoxes"&gt;
                  &lt;li class="recipe" id="recipe02"&gt;&lt;label&gt;Main Dish&lt;/label&gt;&lt;/li&gt;
                         &lt;ul class="recipes"&gt;
                             &lt;li class="ingredient"&gt;&lt;input type="checkbox"&gt; ingredient 1&lt;/li&gt;
                             &lt;li class="ingredient"&gt;&lt;input type="checkbox"&gt; ingredient 2&lt;/li&gt;
                             &lt;li class="ingredient"&gt;&lt;input type="checkbox"&gt; ingredient 3&lt;/li&gt;
                             &lt;li class="ingredient"&gt;&lt;input type="checkbox"&gt; ingredient 4&lt;/li&gt;
                              &lt;li class="instructions"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/li&gt;
                         &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;div class="recipePicContainer"&gt;
              &lt;div class="checkBoxes"&gt;
                  &lt;li class="recipe" id="recipe03"&gt;&lt;label&gt;Dessert&lt;/label&gt;&lt;/li&gt;
                         &lt;ul class="recipes"&gt;
                             &lt;li class="ingredient"&gt;&lt;input type="checkbox"&gt; ingredient 1&lt;/li&gt;
                             &lt;li class="ingredient"&gt;&lt;input type="checkbox"&gt; ingredient 2&lt;/li&gt;
                             &lt;li class="ingredient"&gt;&lt;input type="checkbox"&gt; ingredient 3&lt;/li&gt;
                             &lt;li class="ingredient"&gt;&lt;input type="checkbox"&gt; ingredient 4&lt;/li&gt;
                              &lt;li class="instructions"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/li&gt;
                         &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var main = function() {
      $(document).ready(function () {
          $('ul').hide();
          $('.recipe').click(function () {
              $('.recipes').toggle("slow").toggleClass('selected');
          });
      });
  };
  $(document).ready(main);
  </code></pre>