title: Jquery div filtering based on click event
body: <p>Here i'm having a script that which filters the div elements.</p>
  
  <p><a href="http://jsfiddle.net/X6gQz/1/" rel="nofollow noreferrer">Working Demo here</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="nav"&gt;
  &lt;a href="#" data-category-type="4380" data-category-name="jet"&gt;4380&lt;/a&gt;
  
  &lt;a href="#" data-category-type="4620" data-category-name="air"&gt;4620&lt;/a&gt;
  
  &lt;a href="#" data-category-type="5000" data-category-name="india"&gt;5000&lt;/a&gt;
  
  &lt;/div&gt;
  &lt;div id="Categories"&gt;
      &lt;div class="hide" data-category-type="4380" data-category-name="jet"&gt;4380.&lt;/div&gt;
      &lt;div class="hide" data-category-type="4620" data-category-name="air"&gt;4620.&lt;/div&gt;
      &lt;div class="hide" data-category-type="5000" data-category-name="india"&gt;5000.&lt;/div&gt;
      &lt;div class="hide" data-category-type="4380" data-category-name="jet"&gt;4380.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$('.nav a').on('click', function (e) {
      e.preventDefault();
      var cat = $(this).data('categoryType');
      var nam = $(this).data('categoryName');
      $('#Categories &gt; div').hide();
      $('#Categories &gt; div[data-category-type="'+cat+'"]').show();
  
  });
  </code></pre>
  
  <p>here, i'm checking only one condition (data-category-type), </p>
  
  <p>But here, i want to check the both conditions </p>
  
  <ol>
  <li>data-category-type</li>
  <li>data-category-name</li>
  </ol>
  
  <p>How can i achieve this , can anyone help me out please.</p>
  
  <p><strong>EDIT</strong>
  Here i have one more question, how can i show all div elements (if i click on)</p>
  
  <pre><code>&lt;a href=""&gt;Show all&lt;/a&gt;
  </code></pre>
  
  <p>Thank you</p>