There are many ways to add an flexible accordion menu to your web page. Most of them use div or paragraph but in this post I’m going to use unordered list and jQuery toggle to make an accordion menu.The most important information here is how to toggle list and how to hide/show the related page to viewer. I explained here specifically on dynamic page display with WordPress, you can always take the same theory and apply in other situations.
- Features:
- Work in Wordpress
- Accordion Slide
- Show only top level page list when visiting top level pages
- Show current page’s child page
- Show allpages when visiting child page
Wordpress Code to display page list
I got this code from wordpress.org
<?php if($post->post_parent) $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0"); if ($children) { ?> <ul> <?php echo $children; ?> </ul> <?php } ?>
The code displays all pages. This is the html code generated by Wordpress
<div id="page-list"><ul> <li class="page_item page-item-1611"><a href="http://design-notes.info/archives/" title="Archives">Archives</a></li> <li class="page_item page-item-742"><a href="http://design-notes.info/blogroll/" title="Blogroll">Blogroll</a> <ul> <li class="page_item page-item-1683"><a href="http://design-notes.info/blogroll/this-is-a-demo-page/" title="This is a demo page">This is a demo page</a></li> </ul> </li> <li class="page_item page-item-1096"><a href="http://design-notes.info/linking/" title="linking">linking</a></li> <li class="page_item page-item-113"><a href="http://design-notes.info/about/" title="About">About</a></li> </ul> </div>
Javascripts
Now what we need to do is to create accordion with jQuery’s toggle function and make it dynamically display the page you want your reader to see. Wordpress’s “current_page_item” class is very useful here. I used it on line 5 to list parent pages and again on line 9 to show its child pages.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(document).ready(function() {//hide child page $('#page-list ul li.page_item ul').hide(); //when navigate to a child page show all pages $('#page-list ul li.current_page_item').parent("ul").show(); //show page list when toggle $('#page-list ul li.active ul').show(); //show cerrent page's child page $('#page-list ul li.current_page_item ul').show(); $('#page-list ul li').click(function() { $(this).addClass("active"); $(this).children('ul').slideToggle("slow"); }); }); |
CSS
#page-list { float:left; clear:left; margin:20px 0 0 10px; display:block; position:relative; } #page-list ul { list-style:none; margin:0; } #page-list ul li{ padding:0 10px 0 10px; margin:2px 0; display:block; cursor:pointer; background-color:#ccc; } #page-list ul li ul li{ padding:0; margin:0; position:relative; } #page-list ul li ul li a{ } #page-list ul li a{ padding:3px 5px; display:block; width:150px; background-color:#f4f4f4; }
Conclusion
I first displayed all pages then hide or show them dynamically with jQuery. Its quite handy than using php alone. You can check out the demo page list on the sidebar by navigating to pages. I made a couple of demo pages for you too.
???????. ???? ????? ????????? ?? ??? ?? ???? :)..
[Reply]
you can check another site used this script
http://redstores.com/?page_id=117
[Reply]
Ahhhh!!! Please could you share where goes what to???
Like the Javascrpit? where it goest to, do i copy and create a own one ant then link it somehow to all pages??? Love the soulution but hard to follow hot to make it…
Much Love Astrid
Astrid´s last blog ..16 months old Jaxie
[Reply]
alexandra Reply:
August 3rd, 2009 at 6:59 am
javascript goes above head tag. I did not provide download cause all the answers are here, the process of learning is about trying to get it work. Its not only copy past.
[Reply]
This doesn’t work in IE :(
[Reply]
alexandra Reply:
August 12th, 2009 at 4:03 am
It has been tested in IE8 with no problem
[Reply]
cant find a thing here…where are the links to demo pages?
hmmmm´s last blog ..Family Picture
[Reply]
alexandra Reply:
August 17th, 2009 at 4:05 am
you can navigate to my pages and look at the demo on the right side or visit this site
http://redstores.com/?page_id=117
[Reply]
Nice, is there a way to use it outside of Wordpress?
[Reply]
alexandra Reply:
September 1st, 2009 at 7:05 pm
Well I used wordpress default classes. In order to use with other CMS you have to read their code and figure out.
[Reply]
Hi thanks for posting this tutorial, is there a working example online anymore? I don’t see anything in your pages or the site you posted that has an accordion menu.
Thanks!
Scott
[Reply]
I like it very! I used it in same projects. It also works in Wordpress!
[Reply]
Nice but where can I see the demo?
[Reply]
alexandra Reply:
January 15th, 2010 at 4:32 am
Sorry the demo page is down I ll think of some other ways to show it in the future
[Reply]
Hi,
Great work. However, is it possible to make menu to be open by default. Now it’s always closed until of course I click to open.
Also, how can I make post title to open menu, so that by default it actually shows only title that I have specified and when I click the title, it shows menu?
Title
•menu item1
•menu item2
I’m not so good with javascript :) Also, that demo would be really nice.
[Reply]
alexandra Reply:
February 25th, 2010 at 11:35 pm
Sorry the demo was linked to one of my projects but the client decided to change design so I dont have a working demo anymore. However, Im building another theme now I ll implement this technique and get it online asap
[Reply]