0

Got this code:

<ul>something
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

What I want to achieve is when I click on UL text element(something) whole UL is toggle. When I click on an LI element - only this specific LI element is toggle. I guess I need to modify my code to:

<ul class="whole">something
  <li>
    <ul>one
      <li class="li one">one</li>
    </ul>
    <ul>two
      <li class="li two">two</li>
    </ul>
    <ul>three
      <li class="li three">three</li>
    </ul>
  </li>
</ul>

So I can clink on something (text) to toggle the LI (one,two,three). But how to reconcile toggle whole UL on click with toggling LI?

jQuery code so far:

    $(".whole").click(function()
    {
      $(".li").slideToggle();
    });

What should the rest of the jQ code looks like?

webmasternewbie
  • 167
  • 1
  • 2
  • 16

3 Answers3

2

You want to target the entire unordered list and hide it first with css, use another element to trigger it like a navigation link:

$(".toggle-ul").click(function() {
  $(".whole").slideToggle();
});
$(".whole .toggle-sub-ul").click(function() {
  $(this).parent().find('ul').slideToggle();
});
.whole {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="toggle-ul">Click me</div>
<ul class="whole">
  <li>
    <div class="toggle-sub-ul">Click me</div>
    <ul>
      <li class="li one">one</li>
    </ul>
  </li>
  <li>
    <div class="toggle-sub-ul">Click me</div>
    <ul>
      <li class="li two">two</li>
    </ul>
  </li>
  <li>
    <div class="toggle-sub-ul">Click me</div>
    <ul>
      <li class="li three">three</li>
    </ul>
  </li>
</ul>

EDIT:

You have to add extra elements inside your sub groups to trigger those toggles. code updated

Sergio Alen
  • 716
  • 5
  • 8
  • Nice, right, but to be precise - I need to have an option to show toggled LI element again (that is why I did add additional UL elements). 'Something' text must be always visible (or click me, like it is here in your example) - and others UL texts too. – webmasternewbie Feb 15 '17 at 01:07
  • cool, this is exacly what I wanted - but I always thought that there can't be any div inside UL, LI elements... – webmasternewbie Feb 15 '17 at 14:47
  • you can put whatever you want inside a `li` but not right after an opening `ul` tag. So `ul > li > div` = VALID, `ul > div > li` = INVALID – Sergio Alen Feb 16 '17 at 02:12
1

this will work for you .when clicked on "something" it will hide whole ul. otherwise only specific li is hidden.

    $("#toggleul,.whole").click(function()
            {
              $("ul").slideToggle();
            });
            $('li').click(function(e){
            $(this).slideToggle();
              
            e.stopPropagation();
            })
            $('#toggleli').click(function(){
              $('li').show();
              })
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <ul class="whole">something
          <li>
          one
          </li>
           <li>
        two
          </li>
           <li>
        three
          </li>
           <li>
        four
          </li>
          </ul>
    <div id="toggleul">toggle ul</div>
    <div id="toggleli">show toggled li</div>
Hemant
  • 1,961
  • 2
  • 17
  • 27
  • Nice, right, but I need to have an option to show toggled LI element again (that is why I did add additional UL elements). 'Something' text must be always visible - and others UL texts too. – webmasternewbie Feb 15 '17 at 01:05
  • this is nice - but I prefer clicking on LI element to show/toggle, not an additional div somewhere below. Like click on something - but something text must be visible all the time so it can be use again to show/hide list. – webmasternewbie Feb 15 '17 at 14:53
1

You are right div inside list is an error on validation (Can I use div as a direct child of UL? + Is this HTML structure valid? UL > DIV > { LI, LI } , DIV > { LI, LI } , DIV > { LI, LI }), so lets simply add a class to UL element.

$(".toggle-ul").click(function() {
  $(".whole").slideToggle();
});
$(".whole .toggle-sub-ul").click(function() {
  $(this).parent().find('li').slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="toggle-ul">Click me</div>
<ul class="whole">
  <li>
    <ul class="toggle-sub-ul">Click me
      <li class="li one">one</li>
    </ul>
  </li>
  <li>
    <ul class="toggle-sub-ul">Click me
      <li class="li two">two</li>
    </ul>
  </li>
  <li>
    <ul class="toggle-sub-ul">Click me
      <li class="li three">three</li>
    </ul>
  </li>
</ul>

this should be working exactly as you want. BTW I modify @Sergio Alen code here, beside this div, it's perfectly valid and credits should go to him.

Community
  • 1
  • 1
b4rtekb
  • 136
  • 7