CODEWITHSUNDEEP
javascriptjqueryhtml
TheTonsOfCode
TheTonsOfCode

Reputation: 85

Hiding list in hidden list

I want to hide every parents ul's from span with class "ul-menu", but code what i write hide only first unhidden ul.

I want to hide every single menu ul from parent of span on page load, but this hide only ul number 1 i was check this and if i remove "ul-menu" from span from ul number 1 and then ul number 2 was hide, but i want to hide every thats ul. I was try with each function but this not help. Or can i hide ul in hidden ul level upper or something ?

$('.ul-menu').on("click", function() {
  var t = $(this);
  t.parent().find('ul').toggle();
  if (t.hasClass('glyphicon-chevron-down')) {
    t.removeClass('glyphicon-chevron-down');
    t.addClass('glyphicon-chevron-right');
  } else {
    t.addClass('glyphicon-chevron-down');
    t.removeClass('glyphicon-chevron-right');
  }
});

//Hiding function
$(document).ready(function() {
  $('.ul-menu').parent().find('ul').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-menu well" id="pages">
  <header>Sites</header>
  <ul id="starter">

    <li>
      <span class="glyphicon glyphicon-record"></span> 
      <a href="?page=pages/About">About</a>
    </li>
    <li>
      <span class="glyphicon ul-menu glyphicon-chevron-down"></span> 
      <a href="?page=pages/courses">Courses</a>
      <ul>
        <!-- Ul to hide number 1 -->
        <li>
          <span class="glyphicon ul-menu glyphicon-chevron-down"></span> 
          <a href="?page=pages/courses/topic_1">Topic 1</a>
          <ul>
            <!-- Ul to hide number 2 -->
            <li>
              <span class="glyphicon glyphicon-record"></span> 
              <a href="?page=pages/courses/topic_1/sub_topic_1">Sub Topic 1</a>
            </li>
          </ul>
        </li>
        <li>
          <span class="glyphicon glyphicon-record"></span> 
          <a href="?page=pages/courses/topic_2">Topic 2</a>
        </li>
      </ul>
    </li>
    <li>
      <span class="glyphicon glyphicon-record"></span> 
      <a href="?page=pages/main">Main</a>
    </li>
  </ul>
</div>
<!-- Menu-->

Upvotes: 3

Views: 108

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

You should target only the sibling ul element

$('.ul-menu').on("click", function () {
    var t = $(this);
    t.nextAll('ul').toggle();
    t.toggleClass('glyphicon-chevron-down glyphicon-chevron-right')
});

Demo: Fiddle

Upvotes: 1

Taplar
Taplar

Reputation: 24965

I believe your issue is in your toggle show.

t.parent().find('ul').toggle();

That will find all children ul and toggle them. To get just the immediate ones find on '> ul' instead.

Upvotes: 1

Related Questions