How to hide child element using javascript

user_8979017 0
Viewed 911

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>

html php jquery
3 Answers

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>

user_29432180

You must fix your html code first then try something like this:

$(function() {
  $(".mainnode").click(function() {
    $(this).children('ul').show();
    $(this).siblings('li').find('ul').hide();
  });
});
li > ul {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<ul>
  <li class='mainnode'>A
    <ul>
      <li class='chlnode'>A1</li>
    </ul>
  </li>

  <li class='mainnode'>B
    <ul>
      <li class='chlnode'>B1</li>
      <li class='chlnode'>B2</li>
    </ul>
  </li>
</ul>

The children always should be inside the parent:

<ul>
<li>
<ul><ul>
</li>
</ul>
user_45401830

your html code should be like following

<ul>
  <li class='mainnode'>A
      <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>

  <li class='mainnode'>B
  <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>

  <li class='mainnode'>C
  <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>

  <li class='mainnode'>D
    <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>

  <li class='mainnode'>E
    <ul>
    <li class='chlnode'>E1</li>
  </ul>
  </li>

  <li class='mainnode'>F
  <ul>
    <li class='chlnode'>F1</li>
  </ul>
  </li>

  <li class='mainnode'>G
    <ul>
    <li class='chlnode'>J
        <ul>
          <li class='chlnode'>J1</li>
        </ul>
    </li>

  </ul>
</li>

</ul>
user_55235250
Related