Question

i have the following jquery:

    <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {  
     $(".indexSlideMenu1_Folder div").click(function()
     {
      $(this).removeClass('sliding');
      if ($(this).parent().find('ul').is(':hidden'))
      {                                     
      $(this).parent().find('ul').slideDown(); 
      }
      else
      {
      $(this).parent().find('ul').slideUp(); 
      }
     });  
    });
    </script>

when the page first loads the list only shows Visual Arts. When Visual Arts is clicked the entire list including the Film list slides down. I am trying to hide the Film list when Visual Arts list is clicked. I will then choose to click the Film list and slide it down.

    <div id="indexSlideMenu1">
    <ul> 
    <li class="indexSlideMenu1_Folder"><div><a href="#">VISUAL ARTS</a></div>
     <ul style="display:none;"> 
      <li><a href="./index.php">(dè)Collage</a></li>
      <li><a href="">Drawing</a></li>
      <li><div><a href="#">Film</a></div><span><!-- empty --></span>
       <ul style="display:none;">
        <li><a href="./index.php">(dè)Collage</a></li>
        <li><a href="">Drawing</a></li>
        <li><a href="">Design</a></li>
        <li><a href="">Painting</a></li>
        <li><a href="">Photography</a></li>
      </ul>
     </li> 
     <li><a href="">Design</a></li>
     <li><a href="">Painting</a></li>
     <li><a href="">Photography</a></li>
     <li><a href="">Print Making</a></li>
     <li><a href="">Sculpture</a></li>
     <li><a href="">Street Art</a></li>
     </ul>
     </li>
     </ul>
     </div>

Answer 1

How about something like this:

$(".indexSlideMenu1_Folder div").click(function() {
    $(this).removeClass('sliding');
    if ($(this).parent().find('ul:first').is(':hidden')) {
        $(this).parent().find('ul:first').slideDown();
    }
    else {
        $(this).parent().find('ul').slideUp();
    }
});​

jsFiddle example.