title: Hiding siblings if none are visible
body: <p>I have the following, would be great if someone could help..</p>
  
  <pre><code>    $(".brand-nav").click(function(e){
          var type = $(this).attr( id );
          $('.article').hide();
          $('.' + type).show();            
          e.preventDefault();            
          $(".letter-section").each(function (i) {
              var siblings = $(i).siblings(":visible").length;
              if (siblings == 0) {
                  $(i.big-lettter').hide();
              } else {
                  $(i.big-lettter').show();
              }
          }
      });
  </code></pre>
  
  <p>I've made this JS fiddle to include an idea of the HTML too on: <a href="http://jsfiddle.net/BEa4x/" rel="nofollow">http://jsfiddle.net/BEa4x/</a> as I when I posted it here it didn't format correctly.</p>
  
  <p>When you click on the top menu it should hide all of the links and then only show the relevant ones by the ID of the link.</p>
  
  <p>If then you click on food that means there will be no links visible in the 'A' section, therefore I would need the A hiding as well, else it should be shown.</p>
  
  <p>Any help appreciated :-)</p>