title: Jquery onclick show li, hide ALL syblings li and children element
body: <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
      ul ul
      {
          display: none;
      }
      ul li
      {
          list-style-type: none;
      }
  
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('ul li').addClass('reveal');
          $('.reveal').live('click', function (event) {
              $(this).children('ul').slideDown();
              $(this).siblings('li').children().slideUp();
  
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;a
          &lt;ul&gt;
              &lt;li&gt;inner1
                  &lt;ul&gt;
                      &lt;li&gt;bonner1
                          &lt;ul&gt;
                              &lt;li&gt;donner1&lt;ul&gt;
                                  &lt;li&gt;konner1&lt;/li&gt;
                                  &lt;li&gt;konner2&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;donner2&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;bonner2&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;inner2&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;b
          &lt;ul&gt;
              &lt;li&gt;inner3&lt;/li&gt;
              &lt;li&gt;inner4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to close all sybling inner elements on li click event. This code works, but not in a desired way.It close sybling element but not and child elements inside of sybling element. How can I achieve that?</p>