CODEWITHSUNDEEP
jqueryhtml-lists
zaman
zaman

Reputation: 75

hide a ul when clicked on any li

I have filters which show data by month as per below snippet

I want to close/hide ul which has class "children" when clicked on any li of class "nowShowing". Please help in identifying the event as I tried below but still not work

  $('.children').click(function() {
    children.hide();
  })
<ul class="filters">
  <li class="parent active"><a href="javascript:void(0);" class="customfilters">Filter by Month</a>
    <ul class="children">
      <li class="nowShowing"><a class="all" id="all2" href="#" data-filter="*">All</a></li>
      <li class="nowShowing"><a href="#" data-filter=".June" class="June">June</a></li>
      <li class="nowShowing"><a href="#" data-filter=".July" class="July">July</a></li>
      <li class="nowShowing"><a href="#" data-filter=".August" class="August">August</a></li>
      <li class="nowShowing"><a href="#" data-filter=".September" class="September">September</a></li>
    </ul>
  </li>
</ul>

Upvotes: 2

Views: 68

Answers (4)

Rahul
Rahul

Reputation: 2474

Use .closest to hide

 $('.nowShowing').click(function(){
  $(this).closest('.children').hide();
});
$('.customfilters').click(function(){
  $('.children').show();
});

Demo :https://jsfiddle.net/gaq23jbL/6/

Upvotes: 2

ImAtWar
ImAtWar

Reputation: 1143

You Could do this. Instead of accessing parent you could select nowShowing element.

$('.nowShowing').on('click', function(){
   $(this).parent().css('display','none');
 });

Working example

Upvotes: 0

Curiousdev
Curiousdev

Reputation: 5778

Use .closest

  $('.nowShowing').click(function() {
    $(this).closest(".children").hide();
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filters">
  <li class="parent active"><a href="javascript:void(0);" class="customfilters">Filter by Month</a>
    <ul class="children">
      <li class="nowShowing"><a class="all" id="all2" href="#" data-filter="*">All</a></li>
      <li class="nowShowing"><a href="#" data-filter=".June" class="June">June</a></li>
      <li class="nowShowing"><a href="#" data-filter=".July" class="July">July</a></li>
      <li class="nowShowing"><a href="#" data-filter=".August" class="August">August</a></li>
      <li class="nowShowing"><a href="#" data-filter=".September" class="September">September</a></li>
    </ul>
  </li>
</ul>

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

You can achieve this like:

$('.nowShowing').click(function() {
    $(this).closest('.children').hide();
});

Ex:

$('.nowShowing').click(function() {
    $(this).closest(".children").hide();
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filters">
  <li class="parent active"><a href="javascript:void(0);" class="customfilters">Filter by Month</a>
    <ul class="children">
      <li class="nowShowing"><a class="all" id="all2" href="#" data-filter="*">All</a></li>
      <li class="nowShowing"><a href="#" data-filter=".June" class="June">June</a></li>
      <li class="nowShowing"><a href="#" data-filter=".July" class="July">July</a></li>
      <li class="nowShowing"><a href="#" data-filter=".August" class="August">August</a></li>
      <li class="nowShowing"><a href="#" data-filter=".September" class="September">September</a></li>
    </ul>
  </li>
</ul>

Upvotes: 0

Related Questions