<ul><li> show/hide sub-menu on click

3 Views

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.

So essentially it’d be like this:

Read More

Home
About The Motel V
     Meet The Owners | Rooms | Facilities | Galleries | Guest’s Feedback
City and Country > (if clicked, it would show ‘Things To Do And See | Event Calendar’)
Bookings
Contact
Blog

EDIT

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…

This is what is in the source when the page is finished loading. 

<div class="widget widget_pages" id="pages-2">
<h4 class="widgettitle">Pages</h4>      
<ul>
  <li class="page_item page-item-14 current_page_ancestor current_page_parent"><a href="http://mywebsite.com.au/about-the-motel/">About the Motel</a>
    <ul class="children">
      <li class="page_item page-item-295"><a href="http://mywebsite.com.au/about-the-motel/meet-the-owners/">Meet The Owners</a></li>
      <li class="page_item page-item-17"><a href="http://mywebsite.com.au/about-the-motel/rooms/">Rooms</a></li>
      <li class="page_item page-item-19 current_page_item"><a href="http://mywebsite.com.au/about-the-motel/facilities/">Facilities</a></li>
      <li class="page_item page-item-21"><a href="http://mywebsite.com.au/about-the-motel/galleries/">Galleries</a></li>
      <li class="page_item page-item-2"><a href="http://mywebsite.com.au/about-the-motel/feedback/">Visitor Feedback</a></li>
    </ul>
  </li>
  <li class="page_item page-item-10"><a href="http://mywebsite.com.au/city-country/">City and Country</a>
    <ul class="children">
      <li class="page_item page-item-292"><a href="http://mywebsite.com.au/city-country/things-to-do-and-see/">Things To Do And See</a></li>
      <li class="page_item page-item-4"><a href="http://mywebsite.com.au/city-country/events-calendar/">Events Calendar</a></li>
      <li class="page_item page-item-53"><a href="http://mywebsite.com.au/city-country/local-links/">Local Links</a></li>
    </ul>
  </li>
  <li class="page_item page-item-5"><a href="http://mywebsite.com.au/bookings/">Bookings</a></li>
  <li class="page_item page-item-50"><a href="http://mywebsite.com.au/contact/">Contact</a></li>
  <li class="page_item page-item-47"><a href="http://mywebsite.com.au/blog/">Blog</a></li>
</ul>
</div>
Post Views: 3

Related posts

Leave a Reply

1 comment

  1. You can do it with jquery. Instead of using the “onclick” property of an anchor try putting a unique id and use it for your jquery click event

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script>
    $(function(){
        $(".page-item-10").click(function(){
          $(this+" ul").fadeToggle("slow");
        });

        $(".page-item-14").click(function(){
          $(this+" ul").fadeToggle("slow");
        });
    });
</script>

    You dont need to worry about multiple submenus since the main menus have unique class properties