3

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>

Improve this question
2
  • 1
    ul is not a children here, but is siblings, try to make it as children , $(this).children('ul').show(); there is no children in mainnode Commented Nov 21, 2017 at 11:24
  • 1
    I'd suggest you improve your HTML structure by placing the child ul within the parent li. This then becomes a trivial problem to solve. See @pedram's answer for an example Commented Nov 21, 2017 at 11:37

3 Answers 3

Reset to default
4

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks for the help.it is working fine somehow .but problem with my php code while generating html how can i post the code here to check.
@Shivu I would advise you to make a new question regarding the php question,
1

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>
Improve this answer

2 Comments

This is a much better solution overall. The only thing I'd suggest is to remove the $(".chlnode").parent().hide(); line and put li > ul { display: none; } in CSS. This will avoid the FOUC on load
Yes, hiding in css much better @RoryMcCrossan
0

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>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.