Search jQuery

jQuery Forum

Using jQuery UI

cedico

Expand all zones for an accordion

Answered

Need more info
Answered
Working on it

in Using jQuery UI • 2 years ago

Hi,

- I've used the excellent accordion for few sites and many times, people ask me how to do to expand all the zones/panels at a time (they can close all zones with "active: false" but can't open all) ?

- secondly, I suppose the question is over the basic functionnality of this component but would it be simple
to add a parameter that just enable/desable the Toggle mode ?
ie : if the toggle mode were set to false, the accordion would let the user to show/hide any of the zone he needs to see...

If my questions are away from the point, can you please give me the JQuery UI component that can do that for me... but with the same Accordion look (very beautiful component !).

Thanks in advance

Regards
Cédric

Replies(14)

ajpiano

Re: Expand all zones for an accordion

2 years ago

The docs for accordion (http://docs.jquery.com/UI/Accordion) clearly state that the accordion does not support this, and provide a simple means of rolling your own

NOTE: If you want multiple sections open at once, don't use an accordion

An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:

jQuery(document).ready(function(){
	$('.accordion .head').click(function() {
		$(this).next().toggle();
		return false;
	}).next().hide();
});

That said, however, jQuery UI is actively developing a "panel" widget, each of which functions like an accordion pane. You could incorporate several of these panes together to create what you're after. While panel is not complete, we definitely hope you can test it out and see if it serves your needs. You can grab the panel branch of jQuery UI at http://github.com/jquery/jquery-ui/tree/panel

tomryande..

Re: Expand all zones for an accordion

1 year ago

I wasn't able to find the panel widget on github. It looks like that link goes to a repository of all the other plugins developed here. Can you clue me in to how to find the panel widget from there?

tomryande..

Re: Expand all zones for an accordion

1 year ago

jQuery(document).ready(function(){
	$('.accordion .head').click(function() {
		$(this).next().toggle();
		return false;
	}).next().hide();
});

I don't understand how to implement this. Is it something you add to the jquery.ui.accordion.js file or to the function call at the bottom of the page that starts the accordion?

cedico

Réf.: Expand all zones for an accordion

2 years ago

thanks for you reply and for your code, but how would look like the html code ?
can just you just give me a little example, replacing the Accordion example code please ? (if it doesnt take too much time) :

<div id="accordion">
    <h3><a href="#">Accordion Header 1</a></h3>
    <div>
        Accordion Content 1
    </div>
    <h3><a href="#">Accordion Header 2</a></h3>
    <div>
        Accordion Content 2
    </div>
    <h3><a href="#">Accordion Header 3</a></h3>
    <div>
        Accordion Content 3
    </div>
</div>

> That said, however, jQuery UI is actively developing a "panel" http://github.com/jquery/jquery-ui/tree/panel

Great ! after testing it, it is exactly what the users need... Thanks for that... I just have to wait for the official version ;-)
Maybe are you considering to add 2 "expand all" and "collapse all" buttons (or just publish such functions) ?

Regards
Cédric

rdworth

Réf.: Expand all zones for an accordion

2 years ago

Here's a full example of using jQuery UI Accordion styles and minimal JavaScript to do toggle panels:

http://jsbin.com/eqape

baltazarqc

Réf.: Expand all zones for an accordion

1 year ago

Thank you ... nice post! that's what I was looking for!

cedico

Réf.: Expand all zones for an accordion

2 years ago

Great, thanks a lot !

1uka.z

Re: Expand all zones for an accordion

1 year ago

This is a great idea but; what if I need to update the text on the header ??

In the accordion I have the change option to provide a callback ...

How can I make that in this code ?? Perhaps performing the callback inside the click ??

Cheers

cyclechic..

Re: Expand all zones for an accordion

1 year ago

@rdworth: Thanks for the toggle panels example.

Using this code sample,
1. On page load, how can I expand the first section?
2. On trigger from page by user, perhaps clicking a button or link, how can I expand all sections?

thanks

makku01

Re: Expand all zones for an accordion

1 year ago

I have the same Problem. the example works fine. How can I expand all sections on page load? Is there a possibility to place a cookie which remembers the open sections per user?

colinwre

Re: Expand all zones for an accordion

11 months ago

@RDWorth I had an issue with your solution, closing the tab the first time seemed to reopen the tab but change the class meaning the header was 'closed' but the content still closed.

My solution was:

remove the following line

.addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")

add CSS style for the content like so

.accordian div{
background-color: #eeeeee;
padding: 1em;
border: 1px solid #6c6c6c;
border-top: 0px solid #eeeeee;
border-radius: 5px;
padding-left: 25px;
}

This sorted it all out and it works like normal.

vargalas

Re: Expand all zones for an accordion

7 months ago

rdworth: Thanks. Your solution is really simple and very cool. It's a very usefull snippet!

artfuldoja

Re: Expand all zones for an accordion

6 months ago

Hi Im having so much trouble too.

It works fine in SF but I cannot for the like of me get it to work in IE.

www.muso-syndicate.com/accordion/index11ie.htm

Any ideas? I have included all the CSS etc all in one file so it should be fairly easy to overiew ..

tsaylor

Re: Expand all zones for an accordion

5 months ago

Thanks for this thread! Building on the contributions of rdworth and colinwre, I decided to write that bit of code as a plugin and also solve that "first time" problem a bit more simply. That same problem was bugging me, then I realized that it works correctly with the example jQuery version of 1.4.2, but not with later versions. It turns out the problem comes from the "display" setting in the ui-accordion-content class so it can be resolved by setting display to block.

I also wanted all of the sections to be initially expanded. If you don't want that behavior you can remove the last line of the function (the part that does .end().trigger("click")).

Usage looks something like this:

$("#myDiv").multiAccordion();

Here's the plugin code:

(function ($) {
    $.fn.multiAccordion = function() {
    	$(this).addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
          .find("h3")
            .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
            .hover(function() { $(this).toggleClass("ui-state-hover"); })
            .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
            .click(function() {
              $(this)
                .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
                .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
                .next().toggleClass("ui-accordion-content-active").slideToggle();
              return false;
            })
            .next()
              .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")
              .css("display", "block")
              .hide()
            .end().trigger("click");
    };
})(jQuery);

ciantainc

Re: Expand all zones for an accordion

2 months ago

Thank you so much for putting together this gem tsaylor. It works great.

I would like to customize this to include the following extensions and I am looking for some pointer to do that:

1. Ability to add a couple of link buttons displayed in the header floated to the right. When clicked on the link, I would like to show relevant content in the content panel.

2. Ability to close all

Thank you.

Top Reply

Response title

Attachments

jQuery Forum

Expand all zones for an accordion

Answered

Replies(14)

Re: Expand all zones for an accordion

NOTE: If you want multiple sections open at once, don't use an accordion

Re: Expand all zones for an accordion

Re: Expand all zones for an accordion

Réf.: Expand all zones for an accordion

Réf.: Expand all zones for an accordion

Réf.: Expand all zones for an accordion

Réf.: Expand all zones for an accordion

Re: Expand all zones for an accordion

Re: Expand all zones for an accordion

Re: Expand all zones for an accordion

Re: Expand all zones for an accordion

Re: Expand all zones for an accordion

Re: Expand all zones for an accordion

Re: Expand all zones for an accordion

Re: Expand all zones for an accordion

Statistics

Tags

Actions

Related Posts