Toggle Box - A modified Version of Accordion

[mk.keck]

Use this to get boxes like the accordians, but the
opened boxes still stay opened and the closed boxes
still stay closed.
I know, that there are perhaps some nearly same plugins
like mine. But note: mine uses the same css-styles as
accordion and the init / usage is nearly the same as the
one form accordion.

Samples:

// Quick Init
$("#toggleboxes1").toggleboxes({
header: "h3"
});

// Other Style and Icons
$("#toggleboxes2").toggleboxes({
header: "h3",
boxclass: 'ui-togglebox', // you must build your own style class
in your style.css
icons: {
'header': 'ui-icon-triangle-1-s',
'headerSelected': 'ui-icon-triangle-1-n'
}
});

Demo:
http://www.michaelkeck.de/projects/jquery/

Javascript-Source:
http://www.michaelkeck.de/projects/jquery/_jscripts/jquery/jquery-ui-togglebox.js

I think, this would be really nice to see my ToggleBox in jQuery UI as
an alternative to Accordion.

Regards
Michael Keck

[Scott González]

Hey Michael,

I could see something like this being useful because of the icons and animations, but honestly I don't think using the accordion as a starting point is a good idea.  Even the overview section of the accordion docs makes it clear that this functionality is actually pretty different from an accordion and much easier to implement.  I would also expect a plugin like this to work on a single collapsible panels, not a collection of collapsible panels, since each panel operates completely independent of the other panels.

[Todd Parker]

I don't want to stir up a whole big thing here, but why are we so
against allowing for simple option in the UI accordion to allow
multiple open at once? I guess I understand the argument that this
isn't a "true" accordion, but if it's something people want why not
add the option instead of making people roll a completely separate
plugin?

_t

> >http://www.michaelkeck.de/projects/jquery/_jscripts/jquery/jquery-ui-...

[Richard D. Worth]

On Wed, May 27, 2009 at 3:28 PM, Todd Parker <fg....@gmail.com> wrote:

I don't want to stir up a whole big thing here, but why are we so
against allowing for simple option in the UI accordion to allow
multiple open at once?

Names hold too much meaning to abuse. Same reason we don't point people at the dialog plugin to use it as a tooltip. In certain situations, they might be styled exactly the same, and perform exactly the same function. But it's the wrong tool for the job. Meaning it's not purpose-built for it; over time, or as needs change, it will have unneeded parts, be missing others, etc. I would hate to inherit a project that were abusing a plugin like that. Not only would it be confusing, but there would be no upgrade path.
 

I guess I understand the argument that this
isn't a "true" accordion, but if it's something people want why not
add the option instead of making people roll a completely separate
plugin?

They shouldn't have to roll a completely separate plugin, just use one. It's already written. It's dirt simple. Just needs to be packaged. It will have orders of magnitude less code, and appropriate css classnames. And if it needs to grow, it's free to. If we were to add this feature in accordion, we'd have to support not only it, but anything that grows out of it.

- Richard

[Jörn Zaefferer]

As mentioned in the accordion docs: The accordion plugin goes through
great lengths *preventing* more then one panel being open at a time,
while synchronizing the animations.

Providing a simple plugin that leverages the same CSS classes makes
much more sense.

Jörn

[Todd Parker]

If there are a lot of complex technical reason why this isn't a good
idea, like Jorn's comment on the animations, then I can see this. I
just don't really think that having an accordion with multiple section
open is "abuse". We allow people to have multiple rows of tabs which I
think is much bigger abuse of a UI control, but that's just me. As a
UI designer on projects, I have frequently changed my mind between
whether grouped sections only open one at a time (accordion) or allow
multiple open at once (toggle box) because these are very similar in
terms of why and where you might use them. Usually, it only comes down
to vertical space -- if you think there will be enough room in UI to
accomodate multiple open at once, then that may be a good solution.

On May 28, 4:03 am, Jörn Zaefferer <joern.zaeffe...@googlemail.com>
wrote:
> As mentioned in theaccordiondocs: Theaccordionplugin goes through

> great lengths *preventing* more then one panel being open at a time,
> while synchronizing the animations.
>
> Providing a simple plugin that leverages the same CSS classes makes
> much more sense.
>
> Jörn
>

> On Thu, May 28, 2009 at 1:19 AM, Richard D. Worth <rdwo...@gmail.com> wrote:

>
>
>
> > On Wed, May 27, 2009 at 3:28 PM, Todd Parker <fg.t...@gmail.com> wrote:
>
> >> I don't want to stir up a whole big thing here, but why are we so

> >> against allowing for simple option in the UIaccordionto allow

> >> multiple open at once?
>
> > Names hold too much meaning to abuse. Same reason we don't point people at
> > the dialog plugin to use it as a tooltip. In certain situations, they might
> > be styled exactly the same, and perform exactly the same function. But it's
> > the wrong tool for the job. Meaning it's not purpose-built for it; over
> > time, or as needs change, it will have unneeded parts, be missing others,
> > etc. I would hate to inherit a project that were abusing a plugin like that.
> > Not only would it be confusing, but there would be no upgrade path.
>
> >> I guess I understand the argument that this
> >> isn't a "true"accordion, but if it's something people want why not
> >> add the option instead of making people roll a completely separate
> >> plugin?
>
> > They shouldn't have to roll a completely separate plugin, just use one. It's
> > already written. It's dirt simple. Just needs to be packaged. It will have
> > orders of magnitude less code, and appropriate css classnames. And if it
> > needs to grow, it's free to. If we were to add this feature inaccordion,
> > we'd have to support not only it, but anything that grows out of it.
>
> > - Richard
>
> >> _t
>
> >> On May 24, 3:15 pm, Scott González <scott.gonza...@gmail.com> wrote:
> >> > Hey Michael,
>
> >> > I could see something like this being useful because of the icons and

> >> > animations, but honestly I don't think using theaccordionas a starting

> >> > point is a good idea.  Even the overview section of theaccordiondocs
> >> > makes
> >> > it clear that this functionality is actually pretty different from an

> >> >accordionand much easier to implement.  I would also expect a plugin

> >> > like
> >> > this to work on a single collapsible panels, not a collection of
> >> > collapsible
> >> > panels, since each panel operates completely independent of the other
> >> > panels.
>
> >> > On Sun, May 24, 2009 at 4:34 AM, mk.keck <m...@michaelkeck.de> wrote:
>
> >> > > Use this to get boxes like the accordians, but the
> >> > > opened boxes still stay opened and the closed boxes
> >> > > still stay closed.
> >> > > I know, that there are perhaps some nearly same plugins
> >> > > like mine. But note: mine uses the same css-styles as

> >> > >accordionand the init / usage is nearly the same as the

[Jörn Zaefferer]

I've created a ticket for this: http://dev.jqueryui.com/ticket/4560

Jörn

[Gabriela]

Hi,

Thanks for your version, it's great.
Could you put a link to download it. I'm trying out but I got this
message:

$("#toggleboxes").toggleboxes is not a function

Thanks again

On 24 mayo, 03:34, "mk.keck" <m...@michaelkeck.de> wrote:
> Use this to get boxes like the accordians, but the
> opened boxes still stay opened and the closed boxes
> still stay closed.
> I know, that there are perhaps some nearly same plugins
> like mine. But note: mine uses the same css-styles as
> accordion and the init / usage is nearly the same as the
> one form accordion.
>
> Samples:
>
> // Quick Init
> $("#toggleboxes1").toggleboxes({
>     header: "h3"
>
> });
>
> // Other Style and Icons
> $("#toggleboxes2").toggleboxes({
>     header: "h3",
>     boxclass: 'ui-togglebox', // you must build your own style class
> in your style.css
>     icons: {
>         'header': 'ui-icon-triangle-1-s',
>         'headerSelected': 'ui-icon-triangle-1-n'
>     }
>
> });
>
> Demo:http://www.michaelkeck.de/projects/jquery/
>

> Javascript-Source:http://www.michaelkeck.de/projects/jquery/_jscripts/jquery/jquery-ui-...

[mkk98]

Hello,

> $("#toggleboxes").toggleboxes is not a function

you must have an div-element with the id 'toggleboxes' on your html-
page