Just another idiot with a blog
jQuery Accordion for Wordpress
Posted by
admin in
jQuery on
Nov 18th, 2009 |
14 responses
So I was working on a site with a vertical navigation today and the previous developer working on it made the entire navigation static….Well thats pretty much worthless for a CMS like Wordpress. So I took it upon myself to create an accordion script for Wordpress (it can be used wtihout Wordpress just as easily). I commented the code nicely and you can essentially paste this directly into wordpress and it will work.
The File Structure is as follows
<ul>
<li><a href="http://link"></a>
<ul>
<li><a href="http://subnavlink">LINK</a></li>
</ul>
</li>
</ul>
The CSS You will need
#navigation ul li ul { display:none; }
#navigation .displayMe { display:block; }
Now for the Javascript. This one is for all your Wordpress Developers who need a custom jQuery Accordion
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//If its a page parent (based off wordpress), add the class "displayMe"
//This way the accordion will be opened up on the page you are on.
if ($('#navigation ul li').hasClass("current_page_parent")) {
$('#navigation .current_page_parent ul').addClass("displayMe"); }
//Hide the submenus
$('#navigation ul li ul').hide();
//Add a class to the parent li IF it has sub UL's
$("#navigation ul li:has(ul)").addClass("theDon");
//Da henchman
$("#navigation ul li ul li:has(a)").addClass("henchmen");
//Remove the link if it has a submenu
$('#navigation .theDon > a').attr('href', '#');
//When you click it, toggle bitch.
$('#navigation ul li a').click(
function() {
//Onclick Remove the class dipslay me which is only display:block;
//This way they can close it if they click it or it will glitch
$(this).next().slideToggle('slow').removeClass("displayMe");
//return false so the # doenst move view to the top of the page
if ($(this).attr('href') == '#') { return false; }
//Close it all out
});
});
</script>
<div id="navigation">
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
Hope this jQuery Accordion with an emphasis for Wordpress helps!
Cheers,
-Wes
14 Responses to “jQuery Accordion for Wordpress”
Leave a Reply
I just so happen to be that idiot with a blog. Enjoy. -Wes
Copyright ©2012 wessray.com
nice one wes!
so will this work for categories instead of pages? for ex: your two categories jQuery and random. could i get the accordion to show/hide posts within a category?
Yes, just use
< ?php wp_list_categories('title_li='); ?>
You can use the css that is added when it was subcategories, e.g. “theDon” and “henchmen” to style as needed. Let me know if you have any questions or just hit me up on chat (top of the sidebar)
Two thumbs up… Am I the previous developer?… Lol…
Just continue posting some of your tips dude… It really helps.
I’m digging your post now…
Love the accordion. I was curious, is there a quick way to alter it so that only one group of sub-pages stays open at a time?
Nice work – just the code I was looking for.
For all that wanted the modified accordion, check it out
http://www.wessray.com/labs/accordion.php
good stuff.
Hej,
just found your script and everything works fine. but it seems that the addClass(”displayMe”); } functionality has no effect on my wordpress-output. wordpress gave me the »current_page_item« but the script doesn’t affect that the parent will get the »displayMe«-effect. Any hints what i can do? thank you very very much, cheers
Weingut
Familie
Philosophie
Fakten
Weinlagen
brilliant~!
I’ve been trying to hack my way to this for 8 hours!
Cheers,
Giles
hi,
one question – any idea how to insert a rel tag (ie. rel=”shadowbox”) into the valid link – the child page with content at the end of a parent wp_list_pages tree. You’ve managed to null “#” the parent accordion pages, i want something like that for the final link to the actual page. I’m hoping to use thickbox / shadowbox for my page content, so as to not reload the screen and lose the user’s place on the accordion.
Any ideas?
Thanks again
giles, add $(’#navigation ul li ul li a’).attr(’rel’,'thickbox’); you can see it in the source here http://www.wessray.com/labs/accordion.php
Thanks wes, that works pretty well (not fetching my page but will sort that out)
Is there any way you can get a jQuery script to search through #navigation ul li etc. until it finds the last href link in the tree. I’m using wp_page_list and would like be able to nest the Page with the actual content (the final child) at any level of depth ie.
accordion>accordion>accordion>link
Or
accordion>accordion>link
etc. If you can think of any relevant jQuery that would be sweet.
Thanks!
hi wes, many thanks for this code! i tried to write something like this myself, but it was no good. you really saved my butt!
[...] done, and didn’t find quite the right thing. I did find a good starting point from Wes Ray, jQuery Accordion for Wordpress. There were a few features that weren’t working, and then some that I found necessary to [...]