Accordion: (data-)parent not working for accordion-groups

[r0b-]

Hi,
I'd like to use an accordion that allows just one opened accordiongroup at a time.
From the docs I see that this should be done with the parent-property.
If I set this to the id of the enclosing accordion the generated markup seems to be ok ( (even with an prepended '#') but no exclusive-toggling effect.

I tested with a slightly modified xml taken form the Accordion.class javadoc:

 <b:Accordion ui:field="a1">
      <b:AccordionGroup heading="One" parent="a1">
          <b:Paragraph>one</b:Paragraph>          
      </b:AccordionGroup>

      <b:AccordionGroup heading="With Icon" icon="GITHUB" parent="a1">
          <b:Paragraph>Icon style</b:Paragraph>
      </b:AccordionGroup>

      <b:AccordionGroup heading="With Custom Icon" parent="a1">
          <b:Paragraph>Custom Icon Style</b:Paragraph>
      </b:AccordionGroup>
  </b:Accordion>

Someone got this working? Did I miss sth?
Thanks in advance
Rob

[reinert]

Hi Rob, sorry for being late.

You forgot to set parent's id as 'a1'.

Keep in mind to always consult twitter bootstrap docs too.

Em terça-feira, 19 de novembro de 2013, ro0b escreveu:

Hi,
I'd like to use an accordion that allows just one opened accordiongroup at
a time.
From the docs I see that this should be done with the parent-property.
If I set this to the id of the enclosing accordion the generated markup
seems to be ok ( (even with an prepended '#') but no exclusive-toggling
effect.

I tested with a slightly modified xml taken form the Accordion.class
javadoc:

<b:Accordion ui:field="a1">
<b:AccordionGroup heading="One" parent="a1">
<b:Paragraph>one/b:Paragraph
/b:AccordionGroup

  <b:AccordionGroup heading="With Icon" icon="GITHUB" parent="a1">
      <b:Paragraph>Icon style</b:Paragraph>
  </b:AccordionGroup>

  <b:AccordionGroup heading="With Custom Icon" parent="a1">
      <b:Paragraph>Custom Icon Style</b:Paragraph>
  </b:AccordionGroup>

/b:Accordion

Someone got this working? Did I miss sth?
Thanks in advance
Rob

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/459
.

D. Reinert

[r0b-]

Thanks for your answer, but the id is generated by gwt.
So this is the final HTML that looks ok to me:

<div id="gwt-uid-5" class="accordion">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a id="gwt-uid-7" class="accordion-toggle" href="#gwt-uid-6" data-toggle="collapse" data-parent="#gwt-uid-5">
                    <i></i>
                    One
                </a>
            </div>
            <div id="gwt-uid-6" class="accordion-body in collapse" style="height: auto;">
                <div class="accordion-inner">
                    <p>one</p>
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a id="gwt-uid-9" class="accordion-toggle" href="#gwt-uid-8" data-toggle="collapse" data-parent="#gwt-uid-5">
                    <i class="icon-github"></i>
                    With Icon
                </a>
            </div>
            <div id="gwt-uid-8" class="accordion-body in collapse" style="height: auto;">
                <div class="accordion-inner">
                    <p>Icon style</p>
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a id="gwt-uid-11" class="accordion-toggle" href="#gwt-uid-10" data-toggle="collapse" data-parent="#gwt-uid-5">
                    <i></i>
                    With Custom Icon
                </a>
            </div>
            <div id="gwt-uid-10" class="accordion-body collapse">
                <div class="accordion-inner">
                    <p>Custom Icon Style</p>
                </div>
            </div>
        </div>
    </div>

Edit:

[JulienOrain]

Hi !
I am facing the exact same issue !
Do you have any fix for it ?
Moreover showHandlers seems to be called only for the first click of an accordion group in a accordion.
Some ideas on that ?
Thanks !
Julien

[r0b-]

Hi Julien,
no - haven't found a solution yet

[reinert]

I'll get this issue and try to figure out the problem.

As soon I get some answer, I'll share it here.

D. Reinert

On Wed, Dec 4, 2013 at 2:19 PM, ro0b notifications@github.com wrote:

Hi Julien,
no - haven't found a solution yet

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/459#issuecomment-29825123
.

[JulienOrain]

Thanks
Seems that if an accordion group is already collapsed when you try to collapse it. you can't do anything with it after...
I can send you some code if you need !
Thanks in advance !
Julien

[reinert]

It would be helpful!

D. Reinert

On Wed, Dec 4, 2013 at 2:35 PM, Julien Orain notifications@github.comwrote:

Thanks
Seems that if an accordion group is already collapsed when you try to
collapse it. you can't do anything with it after...
I can send you some code if you need !
Thanks in advance !
Julien

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/459#issuecomment-29826688
.

[reinert]

I already found the problem. Now I'm figuring the solution.

[JulienOrain]

Really ?! What is it ?

[reinert]

It is related to the Collapse Markup.

[reinert]

Fixed!

[reinert]

The commit 850 aims to fix this issue.

Please give some feedback when possible.

[JulienOrain]

Thanks !
I'll try soon and come back with results ;-)

[JulienOrain]

Ok, I build the jar and try my previous code ! It seems to work very well.
Thank you for your work ;-) !

However, the following test case seems to break the accordion.
Let's consider the following code :

private Accordion accordion = new Accordion();
private AccordionGroup acc1 = new AccordionGroup();
private AccordionGroup acc2 = new AccordionGroup();
public TimeOffAccordionPanel(TimeOffController controller) extends FlowPanel {
    acc1.setHeading("acc1");
    acc1.add(new HTML("acc1 content"));
    acc2.setHeading("acc2");
    acc1.add(new HTML("acc2 content"));
    accordion.add(acc1);
    accordion.add(acc2);
    add(accordion);
    Button b = new Button("collapse");
    b.addClickHandler(new ClickHandler() {
        acc1.hide();
        acc2.hide();
    }
    add(b);
}

Case 1 :

• Click on acc1 to open acc1 content
• Click on acc2 to open acc2 content
• Click on collapse button
• Try to play with accordion groups : they have a normal behavior : open/close

Case 2 :

• Click on acc1 to open acc1 content
• DO NOT Click on acc2
• Click on collapse button
• accordion group acc1 will work well
• accordion group acc2 will not work anymore