title: <ul><li> show/hide sub-menu on click
body: <p>I would like to list my site's (built in php and wordpress) pages in the footer in such a away that all of the top level pages are listed vertically with no bullet, and those top level pages that have child pages are listed when the top-level page is clicked on.  The child pages hide when it's parent page is clicked on again.  I'd like it all to be in plain text with no graphics.</p>
  
  <p>So essentially it'd be like this:</p>
  
  <p>Home<br />
  About The Motel V<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Meet The Owners | Rooms | Facilities | Galleries | Guest's Feedback<br />
  City and Country >    <em>(if clicked, it would show 'Things To Do And See | Event Calendar')</em><br />
  Bookings<br />
  Contact<br />
  Blog<br />
  <br />
  <br /></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I see what you're suggesting, but the list is generated by wordpress by adding the "pages list" to the footer widget area, so I can't add a unique id...</p>
  
  <p>This is what is in the source when the page is finished loading. </p>
  
  <pre><code>&lt;div class="widget widget_pages" id="pages-2"&gt;
  &lt;h4 class="widgettitle"&gt;Pages&lt;/h4&gt;      
  &lt;ul&gt;
    &lt;li class="page_item page-item-14 current_page_ancestor current_page_parent"&gt;&lt;a href="http://mywebsite.com.au/about-the-motel/"&gt;About the Motel&lt;/a&gt;
      &lt;ul class="children"&gt;
        &lt;li class="page_item page-item-295"&gt;&lt;a href="http://mywebsite.com.au/about-the-motel/meet-the-owners/"&gt;Meet The Owners&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page_item page-item-17"&gt;&lt;a href="http://mywebsite.com.au/about-the-motel/rooms/"&gt;Rooms&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page_item page-item-19 current_page_item"&gt;&lt;a href="http://mywebsite.com.au/about-the-motel/facilities/"&gt;Facilities&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page_item page-item-21"&gt;&lt;a href="http://mywebsite.com.au/about-the-motel/galleries/"&gt;Galleries&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page_item page-item-2"&gt;&lt;a href="http://mywebsite.com.au/about-the-motel/feedback/"&gt;Visitor Feedback&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="page_item page-item-10"&gt;&lt;a href="http://mywebsite.com.au/city-country/"&gt;City and Country&lt;/a&gt;
      &lt;ul class="children"&gt;
        &lt;li class="page_item page-item-292"&gt;&lt;a href="http://mywebsite.com.au/city-country/things-to-do-and-see/"&gt;Things To Do And See&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page_item page-item-4"&gt;&lt;a href="http://mywebsite.com.au/city-country/events-calendar/"&gt;Events Calendar&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page_item page-item-53"&gt;&lt;a href="http://mywebsite.com.au/city-country/local-links/"&gt;Local Links&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="page_item page-item-5"&gt;&lt;a href="http://mywebsite.com.au/bookings/"&gt;Bookings&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item page-item-50"&gt;&lt;a href="http://mywebsite.com.au/contact/"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item page-item-47"&gt;&lt;a href="http://mywebsite.com.au/blog/"&gt;Blog&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>