## Pages from Parts and Clamshell Navigation

Here we take advantage of CSS selectors in JQuery, along with "parents" and "children" and "show" and "hide" methods.

- Set "iamhere" id
- Close all nested lists
- Show parents of "iamhere"
- Show children of "iamhere"

    $(document).ready(function(){
          console.log("Ready!");
          var mybodyid = $('body').attr('id');
          var mynavid = '#nav_' + mybodyid;
          console.log("mybodyid is " + mybodyid);
          console.log("mynavid is " + mynavid);

          // Set iamhere id
          $(mynavid).attr('id','iamhere');

          // hide all nested lists
          $('#navigation ul ul').hide();

          // show parents of "iamhere"
          $('#iamhere').parents().show();

          // show children of "iamhere"
          $('#iamhere').children().show();
    });

### JSFiddle Example

Note for the JSFiddle example, we are using a 'div' to contain the 'id' instead of the 'body'.
Clamshell Navigation in JS Fiddle

### Files

- clamshell.html
  And see it more slowly in steps, triggered by a button click: clamshell-2.html
- style-clamshell.css