Jquery is not working properly

Question

This is (html + php) code.

<li class='has-sub cuisines'><a href='javascript:void(0)'><span>Cuisine</span></a>
        <ul>
      <li class=""><a href='javascript:void(0)'><span><input type="text" name="search_cuisine" id="search_cuisine" placeholder=" Search Cuisine Here" /></span></a></li>
       <!--<img id="loader_cuisine" src="images/preloader_8.gif"/>-->
               <div id="list_cuisine" >
              <?php
              $row_count=0;
            $query="select cuisine_ID,cuisine_name from cuisine_master where del_flag=1 and display_flag=1 order by cuisine_name";
            $r= mysql_query($query);
            while($result=  mysql_fetch_array($r))
            {

                $ii=0;
                $query12="select distinct r.res_ID from restaurant_master r, buffet_master b, restaurant_cuisine_master cm where r.del_flag=1 and r.res_status=1 and b.res_ID=r.res_ID and cm.res_ID=r.res_ID and cm.cuisine_ID=$result[cuisine_ID]";
                $r12= mysql_query($query12);
                    while($result12=  mysql_fetch_array($r12))
                    {

                               $ii++;

                    }
                if($row_count<10 && $ii>0)
                {
                    $row_count++;

               ?>
            <li><a href='javascript:void(0)'><span><input type="checkbox" name="cuisine[]" id="cuisine_<?php echo $result['cuisine_ID']; ?>" class="cuisine" value="<?php echo $result['cuisine_ID']; ?>"/><label for="cuisine_<?php echo $result['cuisine_ID']; ?>"><?php echo $result['cuisine_name']; ?>(<?php echo $ii; ?>)</label></span></a></li>
               <?php
                }

            }
            ?>
               </div>
       </ul>    
       </li>

This is Jquery Code

    $(document).ready(function(){
    $('.cuisines').click(function(e){
        $('#additional,#seating,#budget,#locations,#last_order,#discount,#buffet_type').removeClass('active');
        $('.cuisines').addClass('active');
        $('.cuisines ul').slideDown('normal');
        $('#locations ul').slideUp('normal');
        $('#additional ul').slideUp('normal');
        $('#seating ul').slideUp('normal');
        $('#budget ul').slideUp('normal');
        $('#last_order ul').slideUp('normal');
        $('#discount ul').slideUp('normal');
        $('#buffet_type ul').slideUp('normal');

    });

});

this is the updated javascript code but cuisines li is not closed after opened. When I clicked on cuisines li then it is open all ul elements but when i clicked on its ul element then also open and close all ul elements this should not be done because ids and classes of li and ul element are different.

Answer 1

This code should have to be written like this:

$(document).ready(function(){
    var i=0;
    $('.cuisines').click(function(){ // click the cuisines li
        i++;
        $(this).addClass('active').siblings('li').removeClass('active'); // add an active class to clicked li and remove from other siblings li
        $('ul', this).slideDown('normal'); // slidedown the ul of clicked li only
        $(this).siblings('li').find('ul').slideUp('normal'); // slideup all the siblings ul which are in view.

        if(i%2===0){
           $('ul', this).slideUp('normal'); // slideup the child ul of clicked li
           $(this).removeClass('active'); // remove the active class from current active li.cuisines
        }
    });

});    

Answer 2

The solution is actually really simple and requires only two small changes in your code.

SOLUTION

1. The jQuery function slideToggle will automatically do what you need.

Simply change the line from:

$('.cuisines ul').slideDown('normal');

to

 $('.cuisines ul').slideToggle('normal');

2. Change the click handler selector to be very specific to only the top link:

HTML:

<li class='has-sub cuisines'>
  <a href='javascript:void(0)'>
   <span class="toggler">Cuisine</span>
  </a>
   ...
</li>`

JS:

  $('li.cuisines span.toggler').click(function(e){
    ...

Here is a link to the working example: https://jsfiddle.net/56sdLxht/

Hope that helps!