How to hide child element using javascript

Question

I have done javascript code for displaying main element if i click main element under all child elements should come but in my code is not working.

$(function() {
  //alert("hello");
  $(".chlnode").parent().hide();
  $(".mainnode").click(function() {
    alert("mainnode is clicking");
    $(this).children('ul').show();
    $(this).siblings().find('ul').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<ul>
  <li class='mainnode'>A</li>
  <ul>
    <li class='chlnode'>A1</li>
    <ul>
      <li class='chlnode'>A3</li>
    </ul>
    <ul></ul>
    <li class='chlnode'>A2</li>
    <ul>
      <li class='chlnode'>A4</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>A5</li>
      </ul>
      <ul></ul>
    </ul>
  </ul>
  <li class='mainnode'>B</li>
  <ul>
    <li class='chlnode'>B1</li>
    <li class='chlnode'>B2</li>
    <ul>
      <li class='chlnode'>B3</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>B4</li>
      </ul>
      <ul></ul>
    </ul>
  </ul>
  <li class='mainnode'>C</li>
  <ul>
    <li class='chlnode'>C1</li>
    <ul>
      <li class='chlnode'>C2</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>C3</li>
      </ul>
      <ul>
        <ul>
          <li class='chlnode'>C4</li>
        </ul>
        <ul>
          <ul>
            <li class='chlnode'>C5</li>
          </ul>
        </ul>
      </ul>
    </ul>
  </ul>
  <li class='mainnode'>D</li>
  <ul>
    <li class='chlnode'>D1</li>
    <ul>
      <li class='chlnode'>D4</li>
    </ul>
    <ul></ul>
    <li class='chlnode'>D3</li>
    <ul>
      <li class='chlnode'>D5</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>D6</li>
      </ul>
      <ul>
        <ul>
          <li class='chlnode'>D7</li>
        </ul>
        <ul></ul>
      </ul>
    </ul>
  </ul>
  <li class='mainnode'>E</li>
  <ul>
    <li class='chlnode'>E1</li>
  </ul>
  <li class='mainnode'>F</li>
  <ul>
    <li class='chlnode'>F1</li>
  </ul>
  <li class='mainnode'>G</li>
  <ul>
    <li class='chlnode'>J</li>
    <ul>
      <li class='chlnode'>J1</li>
    </ul>
    <ul></ul>
  </ul>
</ul>

Answer 1

Try with the following code.

$(function() {
  //alert("hello");
  $(".chlnode").parent().hide();
  $(".mainnode").click(function() {
    alert("mainnode is clicking");
    $(".mainnode ~ ul").hide();
    $(this).next('ul').show();
  });
});

I've changed so $(".mainnode ~ ul").hide(); will hide all ul before we show the one that corrospond to the clicked li.

Since your li has no children but only siblings, you can use .next() or .siblings(), like this $(".mainnode ~ ul").hide();

Demo

$(function() {
  //alert("hello");
  $(".chlnode").parent().hide();
  $(".mainnode").click(function() {
    alert("mainnode is clicking");
    $(".mainnode ~ ul").hide();
    $(this).next('ul').show();
  });
});

This is my html code i am generating php file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<ul>
  <li class='mainnode'>A</li>
  <ul>
    <li class='chlnode'>A1</li>
    <ul>
      <li class='chlnode'>A3</li>
    </ul>
    <ul></ul>
    <li class='chlnode'>A2</li>
    <ul>
      <li class='chlnode'>A4</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>A5</li>
      </ul>
      <ul></ul>
    </ul>
  </ul>
  <li class='mainnode'>B</li>
  <ul>
    <li class='chlnode'>B1</li>
    <li class='chlnode'>B2</li>
    <ul>
      <li class='chlnode'>B3</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>B4</li>
      </ul>
      <ul></ul>
    </ul>
  </ul>
  <li class='mainnode'>C</li>
  <ul>
    <li class='chlnode'>C1</li>
    <ul>
      <li class='chlnode'>C2</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>C3</li>
      </ul>
      <ul>
        <ul>
          <li class='chlnode'>C4</li>
        </ul>
        <ul>
          <ul>
            <li class='chlnode'>C5</li>
          </ul>
        </ul>
      </ul>
    </ul>
  </ul>
  <li class='mainnode'>D</li>
  <ul>
    <li class='chlnode'>D1</li>
    <ul>
      <li class='chlnode'>D4</li>
    </ul>
    <ul></ul>
    <li class='chlnode'>D3</li>
    <ul>
      <li class='chlnode'>D5</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>D6</li>
      </ul>
      <ul>
        <ul>
          <li class='chlnode'>D7</li>
        </ul>
        <ul></ul>
      </ul>
    </ul>
  </ul>
  <li class='mainnode'>E</li>
  <ul>
    <li class='chlnode'>E1</li>
  </ul>
  <li class='mainnode'>F</li>
  <ul>
    <li class='chlnode'>F1</li>
  </ul>
  <li class='mainnode'>G</li>
  <ul>
    <li class='chlnode'>J</li>
    <ul>
      <li class='chlnode'>J1</li>
    </ul>
    <ul></ul>
  </ul>
</ul>