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.

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.

• javascript
• php
• jquery
• html
• css

• Create a JSFiddle with your rendered HTML and javascript so it can be viewed without any PHP code. – Daniel B Commented Aug 20, 2015 at 7:24
• You are missing the context of the selector. – Jai Commented Aug 20, 2015 at 7:27
• how is this. Your <div id="list_cuisine" > is not inside li. I think your HTML structure is wrong. Please correct it – vijayP Commented Aug 20, 2015 at 7:29
• 2 jQuery is working fine, you're using it wrong. – ɴᴀᴛᴇ ᴅᴇᴠ Commented Aug 20, 2015 at 7:30
• how to detect that cuisine ul is opened and when it is opened then how it will be closed in jquery – Saurabh Aren Bharatiya Commented Aug 20, 2015 at 7:56

4 Answers 4

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
        }
    });

});    

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!

Try adding stopPropagation function.

<script type="text/javascript">
$(document).ready(function(){
    var i=0;
    $('.cuisines').click(function(e){
        e.stopPropagation();

        i++;
        //alert("hello : "+$(".cuisines ul").val());
        $('#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');

        if(i%2===0){
        $('.cuisines ul').slideUp('normal');
        $('.cuisines').removeClass('active');
        }
    });

});    

</script>

Html

Cuisine

<div class="menu-toggle hidden" id="customize-menu">
    <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" >
        <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']; ?>"></label>
        </span>
        </a>
        </li>
        </div>
    </ul> 
</div>    

Script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('.cuisines').click(function(e){       
      $(".menu-toggle:not(#customize-menu)").hide();
     $("#customize-menu").toggle();
	});
     $('.cuisines input,ul,li').click(function(e){       
     e.stopPropagation();
	});
});
</script>

Js Fiddle Link [solved solution here]

https://jsfiddle.net/dybwbs92/5/embedded/result/