Show nested ul s based on user click

Question

So, here's my problem: i have a html page generated by an external source which i need to treat like a "survey". If, for example, the user clicks on the first element of the first list we have two options: 1) the element has nested elements: in this case on click this element has to be shown. 2) the element has no nested elements, user should be redirected somwhere else. Please note that in the 1° case the only element that needs to be showed is the first, it should not show all the other nested elements.

Given the fact that the html is generated i unfortunatly can't add any Id or Class, i can only work using Css and Javascript/JQuery.

Here's the HTML, i stopped at level 4, but potentially the levels can be 50 or more:

<div class="multilevel-menu-body">
    <ul class="menu-body level1">
        <li class="menu level1">
            <p>Sono</p>
            <ul>
                <li class="sublevel level1">
                    <div>
                        <div class="link">
                            <a href="#">Uomo</a>
                        </div>
                        <div class="wrapper-nested-el">
                            <ul class="menu-body level2">
                                <li class="menu level2">
                                    <p>La mia età è di</p>
                                    <ul>
                                        <li class="sublevel level2">
                                            <div>
                                                <div class="link">
                                                    <a href="#">20-40</a>
                                                </div>
                                                <div class="from">
                                                    <p>20</p>
                                                </div>
                                                <div class="to">
                                                    <p>40</p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="sublevel level2">
                                            <div>
                                                <div class="link">
                                                    <a href="/it/sample/faq">41-50</a>
                                                </div>
                                                <div class="from">
                                                    <p>41</p>
                                                </div>
                                                <div class="to">
                                                    <p>50</p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="sublevel level2">
                                            <div>
                                                <div class="link">
                                                    <p>51-60</p>
                                                </div>
                                                <div class="from">
                                                    <p>51</p>
                                                </div>
                                                <div class="to">
                                                    <p>60</p>
                                                </div>
                                                <div class="wrapper-nested-el">
                                                    <ul class="menu-body level3">
                                                        <li class="menu level3">
                                                            <p>Il mio titolo di studio è</p>
                                                            <ul>
                                                                <li class="sublevel level3">
                                                                    <div>
                                                                        <div class="link">
                                                                            <a href="#">Licenza elementare</a>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="sublevel level3">
                                                                    <div>
                                                                        <div class="link">
                                                                            <a href="#">Licenza media</a>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="sublevel level3">
                                                                    <div>
                                                                        <div class="link">
                                                                            <a href="#">Laurea</a>
                                                                        </div>
                                                                    </div>                                                                          
                                                                </li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    <p>anni</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="sublevel level1">
                    <div>
                        <div class="link">
                            <a href="#">Donna</a>
                        </div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

I tried to script something to hide all the nested divs and make them visible on click, but it doesn't work. And i'm pretty sure my solution isn't dinamic, at the moment i'm assuming that level1 has only 2 questions, but if one more is added then it won't work anymore.

JS:

$( document ).ready(function() {
  $(".sublevel.level1 ul li").children().css("display", "none");

  var currentNode;

  $(".menu.level1 .sublevel.level1").eq(0).mouseup(function(){
    $(".menu.level1 .sublevel.level1").eq(1).hide();

  if($(".menu.level1 .sublevel.level1").children().find("> .wrapper-nested-el")){
    currentNode = $(currentNode).children().find("> .wrapper-nested-el");
    currentNode.css("display", "");
  }     

  $(".menu.level1 .sublevel.level1").eq(1).mouseup(function(){
    $(".menu.level1 .sublevel.level1").eq(0).hide();
  });
});

Sorry for the complexity, i'm pretty new to Javascript and i'm pretty much stuck on this thing.

Thanks in advance

Answer 1

I managed to solve this. I basically deleted all my previous js file and added this simple function:

$(document).ready(function(){

$(".link").click(function(){
    $(this).siblings().show();
  });

 });

And then i added to my css a display: none to all the wrapped nested elements that create the tree:

 .wrapper-nested-el {
  display:none;
}

Special thanks to Rakesh Chaudhari who gave me the input with his fiddle.

Thanks a lot!

Answer 2

you will need to do following changes in your code

CSS

.sublevel {
  display: none;
}

JS

$(document).ready(function(){
  $(".menu").click(function(){
    $(this).find('> ul > li.sublevel').show();
  })
})

Demo - https://jsfiddle.net/2uLv6upw/1/

Answer 3

You can add the css display:none in the nested ul's and on user click in the nested li make the ul visible. Give a unique name to so it will be easy to identify any nested li's