Category Accordion

BTW x00, I just noticed you had an accordion category plugin, I was going to try to add one, based on depth2. I was trying to move all depth2 and depth3 as vanilla creates them
<li class="Heading">heading 1</li> <li class="Depth2"><strong><a href="/forum/categories/sub1">↳ sub1</a></strong><span class="Count">61</span></li> <li class="Depth3"><strong><a href="/forum/categories/sub1a">↳ sub1a</a></strong><span class="Count">8</span></li> <li class="Depth3"><strong><a href="sub1b">↳ sub1b</a></strong><span class="Count">5</span></li> <li class="Heading">heading 2</li> <li class="Depth2"><strong><a href="/forum/categories/sub2">↳ sub2</a></strong><span class="Count">61</span></li> <li class="Depth3"><strong><a href="/forum/categories/sub2a">↳ sub2a</a></strong><span class="Count">8</span></li> <li class="Depth3"><strong><a href="sub2b">↳ sub2b</a></strong><span class="Count">5</span></li>
to something like this via jQuery (but I was having trouble parsing the object after it was selected to convert it to tags below)
the only way I could think of doing this was modifying the categories routine in categories.php to redo the writing of tags and then call the js. If the categories were presented with the tags below the accordion ui with the following scripts below. If this were done it wouldn't be a true plug-in, would it.
Do you have any ideas on this?
<
div class="BoxCategories" class= "fancy" >
<h2><a href="#heading1">heading 1</a></h2> <div> <ul> <li><a href="/forum/categories/sub1">sub1</a></li> <li><a href="/forum/categories/sub1a">sub1a</a></li> <li><a href="/forum/categories/sub1a">sub1b</a></li> </ul> </div> <h2><a href="#heading2">heading 2</a></h2> <div> <ul> <li><a href="/forum/categories/sub2">sub1</a></li> <li><a href="/forum/categories/sub2a">sub2a</a></li> <li><a href="/forum/categories/sub2b">sub2b</a></li> </ul> </div> accord.css </script> <style type="text/css"> .ui-accordion-header { padding: 0 3px; } .ui-accordion .ui-accordion-content { padding: 0; } .ui-accordion .ui-accordion-content ul { list-style: none; } .ui-accordion .ui-accordion-content ul li a { text-decoration: none; font-weight: bold; } .ui-accordion .ui-accordion-content ul li a:hover { color: blue; } .BoxCategories { width: 250px; } </style>
myaccord.js
jQuery(document).ready(function($) { jQuery('PanelCategories').accordion({ function() { $('ul').accordion({ fillSpace: true, event: 'mouseover', header: 'h2' }); } });
I was trying to do this for
I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.
Answers
look at my code it is just javascript and css, it shows how the the categories are wrapped. there are no divs involved. use firefox to see the structure. Look at jQuery docs to interpret it.
grep is your friend.
upon closer scrutiny
Got it. You've got a "very nice" routine at bottom with next.is() and nextUntil and wrapAll.
I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.