如何使用Adi Palaz的嵌套手风琴展开全部/全部折叠

Question

Adi Palaz's Nested Accordion

This seems like it should be simple but I can't seem to figure this out and I have been sitting here slamming my head on my desk after like four hours without a solution.

You will notice in the demo on the page that there are expand all/collapse all buttons that fire a function to open all the accordion panels or close them.

I DON'T want to use those buttons. I want to write my own function and fire the expand all or collapse all function after the user completes a gesture on a DIV somewhere else on the page.

But I can't seem to figure out how to call the same function the author is using on the buttons to properly expand and collapse the accordion panels.

If it helps, I set up a test page to play with: http://dl.dropbox.com/u/22224/Newfolder/nested_accordion_demo3.html

And here are the two scripts it needs to work:

Nested Accordion Script

Expand.js

Please help! I am desperate and the author is not responding to emails!

Answer 1

I was able to solve the expand/collapse all problem with the following code, hope it will work for you as well.

function expand(id) {
    var o = $.extend({}, $.fn.accordion.defaults, null);
    var containerID = o.container ? id : '', objID = o.objID ? o.objID : o.obj + o.objClass, Obj = o.container ? containerID + ' ' + objID : id, El = Obj + ' ' + o.el, hTimeout = null;
    $(El + ' a.trigger').closest(o.wrapper).find('> ' + o.next).show().closest(o.wrapper).find('a.trigger').addClass('open').data('state', 1);
}

function collapse(id) {
    var o = $.extend({}, $.fn.accordion.defaults, null);
    var containerID = o.container ? id : '', objID = o.objID ? o.objID : o.obj + o.objClass, Obj = o.container ? containerID + ' ' + objID : id, El = Obj + ' ' + o.el, hTimeout = null;
    $(El + ' a.trigger').closest(o.wrapper).find('> ' + o.next).not('.shown').hide().closest(o.wrapper).find('a.open').removeClass('open').data('state', 0);
}

Example:

expand('#accordion1');
collapse('#accordion1');

Answer 2

I'm faced with the exact same problem and would like to know if you ever found an answer?

The work around I plan to use is something like $('.accordion a').click(); to programmatically click each link in the list - not pretty but it seems to work...

Answer 3

Two years later and I have the same desire... use Adi Palaz nested accordion, but have my OWN styled and specific action expand/collapse all buttons. I did finally get it to work the way I wanted even though I am admittedly a novice level jquery programmer. Here's my key learnings:

• I started with example nested_accordion_demo5.html with the #acc1 example. I did not use expand.js at all, I never could get it to work.
• I changed the function defaults in my demo5.html to add the obj: "div".

  $("#acc1").accordion({ obj: "div", el: ".h", head: "h4, h5", next: "div", iconTrigger: true }); 

• Then I added a div with class="accordion" around the whole ul structure and removed the accordion class from the ul.
• I made my own two expand/collapse links and put them inside the div but before the ul. Later I got fancy and added styling to make them look like buttons, but first I got it working.

 <a href="#" class="ExpandAll">[Expand All]</a>&nbsp;<a href="#" class="CollapseAll">[Collapse All]</a> 

• Then I added two new separate event handlers to jquery.nestedAccordion.js using snippets from the one that handles the a.trigger events. I placed them immediately after the existing event handler. Here's my new CollapseAll:

 $(Obj).delegate('a.CollapseAll', ev, function(ev) { $( o.obj + o.objClass ).find('a.trigger').each(function() { var $thislink = $(this), $thisWrapper = $thislink.closest(o.wrapper), $nextEl = $thisWrapper.find('> ' + o.next); if (($nextEl).length && $thislink.data('state') && (o.collapsible)) { $thislink.removeClass('open'); $nextEl.filter(':visible')[o.hideMethod](o.hideSpeed, function() {$thislink.data('state', 0);}); } }); }); 

• Then I made a second event handler that does the ExpandAll.

I know this could likely be much more efficient, but I am thrilled to at least have it working given my skill level!