item selection help..

item selection help..

Last night I was working on a little small project, building a directory browser, displays folders and items within the folders. Sub directory items are originally hidden, and will slide down upon clicking the folder.

Image

Code for the page is set up basically like this..

<div class='.is_folder'>
Root Folder
     <div class='.is_folder'>Subdirectory
          <div class='.is_file'>File in subdirectory</div>
     </div>
<div class='.is_file'>FileUnderRoot.ext</div>
</div>


As mentioned, all lower level things are hidden initially by calling..

$('.is_folder  div').hide();


The sliding up and down of the sub items is where it gets tricky though. The code below is what I'm trying it with. They will slide down every time, but an additional, similar IF statement to try to determine if the sub contents are visible or not, and to slide those up, never works. I've gotten it to somewhat work several times, but its like it doesnt know what the IF statements are. It will scroll everything up, all the way from the parent of the current, then slide back down. Or I've had a case to where, it slides everything up, and i have to traverse back down to that section to show that it really slid that folder up. I want it to do one folder at a time, not the current, its parents, etc. I'm thinking it has something to do with the way the divs are nested, that by using $(this) its seeing the parent div in the background, but I havent been able to find a better way to select it. I nested the divs to make margins and alignment easier. Any ideas of how to make this work properly?

$('.is_folder').click(function() {      
   if ( $(this).children(':first-child').is(':hidden') )
   {
      $(this).children().slideDown("fast");
   }      
});