[solved] Selecting and traversing

[solved] Selecting and traversing

Good evening everyone - I'm new with jQuery (so be kind) and struggling to get my head around one aspect of it - I have what I want working, but wondering if this is the correct way to do it.

Basically I'm looking at having a number of panels - some of which can be collapsable by a control in the heading bar of that panel.

So I have that functionality working, but not sure if I've written the code in the correct way - looks a little clumsy to me, and I'm not sure what I should be searching for (as in search terms) to find a better solution.

Here is the HTML for the panel:

      <div class="fPanel">
     
        <div class="fPanelHeader">
          <div class="fPanelHeaderLabel">Label</div>
          <div class="fPanelHeaderControl">Control</div>
        </div>
       
        <div class="fPanelBody">
        Panel Content that will show/hide is in here
        </div>
     
      </div>


And my jQuery code:
$(document).ready(function(){
      
   $('.fPanel').children('.fPanelHeader').children('.fPanelHeaderControl').click(function() {
      if ($(this).parent().parent().find('.fPanelBody').is(':visible'))
      {
         $(this).parent().parent().find('.fPanelBody').slideUp('slow');
      }
      else
      {
         $(this).parent().parent().find('.fPanelBody').slideDown('slow');
      }
   });

});


To me, the "parent().parent().find()" call chain seems a little clunky. But maybe that's just my head trying to argue with jQuery

Is this the best/most-efficient/best-practice way to do what I want to do?

Any other ideas, or suggestions of reading to look at?

Cheers,
M