Category Accordion

peregrine

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

http://vanillaforums.org/discussion/19442

x00

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.

x00

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.

peregrine

upon closer scrutiny
Got it. You've got a "very nice" routine at bottom with next.is() and nextUntil and wrapAll.