Textpattern CMS

#1 2010-04-04 00:00:01

mrdale

Member

From: Walla Walla

Registered: 2004-11-19

Posts: 2,215

Website

[howto] Nested accordion-style section/category nav

The following snippet will automatically create an accordion style nested unordered list with sections as the top level and section-specific categories as the second level.

Requires:

• mootools with the accordion plugin loaded in the head
• aks_var
• Probably Textpattern 4.2

Categories must have a parent named to correspond to the section you wish to have that category nested under. eg, section: “Animals” might have categories: “mammals”, “birds” and “fish” which would all have the parent category: “Animals-section”

The hover-style accordion (requires mootools, but could easily be modified for jQuery) will automatically collapse all sections, and open just the active section’s categories (via some variable trickiness).

Markup looks like this:

• section1
• section2
  • categoryA (child category of “section2-section”)
  • categoryB (child category of “section2-section”)
  • categoryC (child category of “section2-section”)
• section3
  • categoryD (child category of “section3-section”)
  • categoryE (child category of “section3-section”)
  • categoryF (child category of “section3-section”)
• section4

have fun!

<!-- ..........{   Navs   }............................................................. -->
<txp:variable name="counter" value="0" />
<a id="menu_default" href="/">Home</a>
<div id="nav01">
<txp:section_list class="sections" wraptag="ul" break="">
      <txp:variable name='<txp:section/>' value='<txp:variable name="counter"/>' />
      <txp:aks_var name="counter" calc="+1" /> 
  <li id="menu_<txp:section />" class="handle<txp:if_section name='<txp:section />'> selected</txp:if_section>"><!-- <txp:section/> section =<txp:variable name='<txp:section/>'/> -->
    <txp:section title="1" link="1" /><ul class="categories drawer">
    <txp:category_list wraptag="" break="" class="" parent='<txp:section />-section' exclude='<txp:section />-section'>
    <li id="menu_<txp:category />" class="<txp:if_category name='<txp:category />'>selected</txp:if_category>">
      <a href="/<txp:section/>/<txp:category />"><txp:category title="1" /></a>
    </li>
    </txp:category_list></ul>
  </li>
</txp:section_list>
</div>
<script type="text/javascript">window.addEvent('domready', function() {
   var myAccordion = new Accordion($$('.handle'), $$('ul.drawer'), {
      alwaysHide: true,
      show:<txp:variable name='<txp:section />'/>
   });
   $$('.handle').addEvent('mouseenter', function() { this.fireEvent('click'); });
}); 
</script>

#2 2010-04-04 07:10:45

candyman

Member

From: Italy

Registered: 2006-08-08

Posts: 684

Re: [howto] Nested accordion-style section/category nav

Any chance to use jQuery instead with is out of the box? Thanks.

#3 2010-04-04 08:19:43

jpdupont

Member

Registered: 2004-10-01

Posts: 752

Re: [howto] Nested accordion-style section/category nav

Alessandro,

You could adapt this code I wrote to use with such a txp menu (category>articles). (Link to the textpattern/jquery.js – no plugin used)

Here categories = h4 title, article lists are ul

$(document).ready(function(){
    $('#menu_section ul').hide();
    //$("#menu_section ul:first").show(); //expand the first ul
    $("#menu_section ul.expand").show();  //expand the ul with expand class 
    $("#menu_section h4").click(function(){
      $(this).next("ul").slideToggle("fast");
        $(this).siblings().next("ul:visible").slideUp("fast");
    });
    });

Here the txp code (many stufs stolen from Els tips !)

<div id="menu_section">
<txp:category_list break="">
   <txp:variable name="has_articles" value='<txp:article_custom section=''<txp:section />'' category=''<txp:category />'' limit="1" />' />
   <txp:if_variable name="has_articles" value="">
   <txp:else />
    <h4><txp:category title="1" /></h4>
   <txp:article_custom section='<txp:section />' category='<txp:category />' wraptag="ul" break="li" class='<txp:if_variable name="cat" value=''<txp:category />''>expand<txp:else/></txp:if_variable>'>
   <txp:permlink class='<txp:if_variable name="artid" value=''<txp:article_id />''>active<txp:else/></txp:if_variable>'><txp:title /></txp:permlink>
   </txp:article_custom>
   </txp:if_variable>
</txp:category_list>
</div>

Or an other with nested lists :

$(document).ready(function(){
    $('ul.menu ul').hide();
    $("ul.menu ul:first").show();
    $("ul.menu li").click(function(){
      $(this).children("ul").slideToggle("fast");
        $(this).siblings().children("ul:visible").slideUp("fast");
    });
    });

(txp code with nested list easy to adapt from above …)

Last edited by jpdupont (2010-04-04 08:37:21)

#4 2010-04-04 15:27:50

candyman

Member

From: Italy

Registered: 2006-08-08

Posts: 684

Re: [howto] Nested accordion-style section/category nav

Many thanks, Dave: I’ll give a try and let you know.