jQuery Tools: How to open/close accordion section?

问题

Here is my problem.

I built a perfectly functioning accordion using jQuery Tools. Very easy to work with.

Client comes back and says that now accordions must be collapsible, which wasn't in the original spec. Unfortunately, jQuery Tools accordion does not have this functionality built in, so I've been working on my own code.

I've gotten close, but nothing 100% works. I've created a JSFiddle of my code here: http://jsfiddle.net/4ubZs/15/

The collapse code working fine.

// Code to collapse accordions
$("#accordion > h2").click(function(){
if (this.className == "current") {
    $(this).removeClass("current");
    $(this).next("div").slideToggle("slow");
} else {

It is the reopening that is a problem. I've attempted 2 different solutions to reopen. The first block of code is attempting to use the Tools API. It will not re-open the recently closed tab, but will work if I replace "current_tab" with an actual index number in the .click() call, but not if I try to get the index programatically.

var api = $("#accordion").data("tabs");
var current_tab = api.getIndex(this);
api.click(current_tab);

The second block attempts to circumvent the jQuery Tools API, and works, however I get a double animation when opening, which I'm assuming is a conflict with the jQuery Tools functionality.

$(this).parent().children("h2").removeClass("current");
$(this).parent().children("div").slideUp("slow");
$(this).toggleClass("current");
$(this).next("div").slideToggle("slow");

If anyone can point out what I'm doing wrong it would be a HUGE help.

Thanks!

Edit: Thinking about this more, the first block of "reopen" code not working makes sense. Because I'm just removing classes from the open accordion, I'm not actually telling jQuery Tools that it has been closed. So when I click on it to reopen it, as far as jQuery Tools knows, that accordion is already open and doesn't need to open again. I guess I need to figure a way to tell jQuery Tools that the accordion is closed and that code will work.

回答1:

In my searches for "close jQuerytools tabs on re-click" I kept finding this posting. jQuerytools has updated its core code and even though the above code would work for the previous versions I have written a new pass in called "closeOnClick" to match the style of jQuery UI.

        $el.tabs(
        ".envs div.panes",
        {
            tabs: "h3",
            effect: 'slide',
            collapse: false,
            closeOnClick: true,
            initialIndex: null
        }
    );

https://jsfiddle.net/googabeast/co8nxm8y/

The Tabs.js code was pulled directly from the github of jQuerytools

回答2:

I found this code: http://pastie.org/1421642/wrap I applied this jquery plug in and was able to successfully get it working. Thanks to anyone who may have looked into this!

来源：https://stackoverflow.com/questions/9831454/jquery-tools-how-to-open-close-accordion-section

标签

jquery

css

accordion

jquery-tools