Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Category Accordion

peregrineperegrine MVP
edited April 2012 in Vanilla 2.0 - 2.8

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

I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

Best Answer

  • Options
    x00x00 MVP
    edited April 2012 Answer ✓

    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.

Answers

  • Options
    x00x00 MVP
    edited April 2012 Answer ✓

    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.

  • Options
    peregrineperegrine MVP
    edited April 2012

    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.

Sign In or Register to comment.