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

r0b- · 2013-11-19T17:44:55Z

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

The text was updated successfully, but these errors were encountered:

reinert · 2013-11-22T00:39:55Z

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- · 2013-11-22T08:21:46Z

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 · 2013-12-04T17:01:38Z

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- · 2013-12-04T17:19:04Z

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

reinert · 2013-12-04T17:33:27Z

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 [email protected] 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 · 2013-12-04T17:35:50Z

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 · 2013-12-04T17:36:54Z

It would be helpful!

D. Reinert

On Wed, Dec 4, 2013 at 2:35 PM, Julien Orain [email protected]:

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 · 2013-12-04T17:54:46Z

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

JulienOrain · 2013-12-04T18:10:03Z

Really ?! What is it ?

reinert · 2013-12-04T18:21:54Z

It is related to the Collapse Markup.

reinert · 2013-12-04T18:35:30Z

Fixed!

reinert · 2013-12-04T18:46:23Z

The commit 850 aims to fix this issue.

Please give some feedback when possible.

JulienOrain · 2013-12-04T19:15:41Z

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

JulienOrain · 2013-12-04T20:00:44Z

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

JulienOrain · 2014-01-09T15:42:48Z

Any news on this point ?!

reinert · 2014-01-09T16:48:28Z

Not yet Julien.

As soon as I get some time, I'll check it.

If you feel like, you can try something too. We haply accept contributions.

reinert · 2014-01-09T16:52:29Z

As a quick fix for your logic, you could check if AccordionGroup is visible before hiding.

reinert · 2014-01-11T21:47:08Z

@JulienNexonia I just tried this reported use case and it happens that the Accordion works as expected.

Could you state your context wider?

JulienOrain · 2014-01-11T22:23:09Z

Hi @reinert !
I just tested the previous use case and I am able to reproduce it.

Here is the source code I used :
public class JORDialog extends FlowPanel {

private FlowPanel fp = new FlowPanel();

 private Accordion accordion = new Accordion();
 private AccordionGroup acc1 = new AccordionGroup();
 private AccordionGroup acc2 = new AccordionGroup();

 public JORDialog() {
  super();

  acc1.setHeading("acc1");
  acc1.add(new HTML("acc1 content"));
  acc2.setHeading("acc2");
  acc2.add(new HTML("acc2 content"));
  accordion.add(acc1);
  accordion.add(acc2);
  fp.add(accordion);
  Button b = new Button("collapse");
  b.addClickHandler(new ClickHandler() {

     @Override
     public void onClick(ClickEvent event) {
        acc1.hide();
        acc2.hide();
     }
  });
  fp.add(b);
      add(fp);
   }

When I do not click on the collapse button, the behavior is what I expect :

when I click on acc1, the accordion 1 will open and the acc1 content will be displayed.
when I click on acc2, the accordion 1 will close; the accordion 2 will open and the acc2 content will be displayed.
when I click again on acc1, the accordion 2 will close, the accordion 1 will open and the acc1 content will be displayed.
and so on.

However, after refreshing the page, when I click on the collapse button first, I will be unable to open both accordions.

Is it clearer ?
Let me know if I can do help you with anything else.

By the way, I also tested for the visibility of accordion, but it does not change anything.

Thanks in advance !
Regards,
Julien Orain

reinert · 2014-01-11T22:51:58Z

Are you refreshing clicking on the browser's refresh button or on another way?

reinert · 2014-01-11T22:53:04Z

Is your base class (JORDialog) a popup?

JulienOrain · 2014-01-11T22:54:10Z

Actually the panel is opened in a popup. So I don't really need to refresh the page via the browser. I just have to close the popup and re-open it. (accordion are recreated this way).

reinert · 2014-01-11T23:13:42Z

Oh! I see! When dynamically creating Accordions, you need to call configure manually.

And that's not a GWT-Bootstrap issue, that's normal when using Bootstrap with Ajax. See "Via Javascript" subsection of Collapse.

So I suggest you call Collapse.configure(accordionGroupId, accordionId, false) for each AccordionGroup after opening the popup.

In fact, it would be better if some reconfigure() methods exist in Accordion. I can create one. But before, tell me if this solution worked for you.

JulienOrain · 2014-01-11T23:34:23Z

Oh Thanks !

I tried it briefly with no success with the following code :

  accordion.setId("group");
  acc1.setId("acc1");
  acc1.setParent(accordion.getId());
  acc2.setId("acc2");
  acc2.setParent(accordion.getId());

  acc1.setHeading("acc1");
  acc1.add(new HTML("acc1 content"));
  acc2.setHeading("acc2");
  acc2.add(new HTML("acc2 content"));
  accordion.add(acc1);
  accordion.add(acc2);
  fp.add(accordion);
  Button b = new Button("collapse");
  b.addClickHandler(new ClickHandler() {

     @Override
     public void onClick(ClickEvent event) {
        acc1.hide();
        acc2.hide();
     }
  });
  fp.add(b);


  Collapse.configure(acc1.getId(), accordion.getId(), false);
  Collapse.configure(acc2.getId(), accordion.getId(), false);

Maybe I am missing something...
I'll try again on Monday (or maybe tomorrow if I find some time ;-))
I'll come back to you soon !
Thanks again !
Julien

reinert · 2014-01-12T01:03:52Z

Two points:

Use Scheduler.get().scheduleDeferred(..) so you assure your logic is executed after any necessary setup.
If you are using Modal, listen to then "shown" event so you perform the configuration after the dialog is completely shown. (sure, with Scheduler too)

reinert · 2014-01-12T03:10:26Z

I've tried many ways but I couldn't reproduce this misbehavior.

It's working perfectly even inside modal. I'll even include an example in the showcase of it.

I guess you're always creating a new instance of this JORDialog when requesting it to show, right?

If so, the configure logic must be inside the show trigger event handling.

    // When user clicks the button to show dialog, or some other event causes it...
    dialog.show();
    Scheduler.get().scheduleDeferred(new Command() {
        @Override
        public void execute() {
            dialog.configureAccordion();
        }
    });

You should create the configureAccordion method for your dialog with the logic of reconfiguring the accordionGroups:

  Collapse.configure(acc1.getId(), accordion.getId(), false);
  Collapse.configure(acc2.getId(), accordion.getId(), false);

JulienOrain · 2014-01-12T16:39:29Z

Hi @reinert !
Have you tried to click on the collapse button before testing the accordion ?!
Sadly, I am still having this issue.

I tried to move the accordion directly in the entry point to avoid modal confusions without any success.
Here is my code :

Base :

public class Base implements EntryPoint {

 private JORPanel jorPanel = new JORPanel();

 public void onModuleLoad() {
    RootPanel.get("mainTable").setWidth("100%");
    RootPanel.get("mainTable").add(jorPanel);

  Scheduler.get().scheduleDeferred(new Command() {
     @Override
     public void execute() {
        jorPanel.configureAccordion();
     }
  });
 }
}

JORPanel :

 public class JORPanel extends FlowPanel {

  private FlowPanel fp = new FlowPanel();

  private Accordion accordion = new Accordion();
  private AccordionGroup acc1 = new AccordionGroup();
  private AccordionGroup acc2 = new AccordionGroup();

  public JORPanel() {
     super();
     accordion.setId("group");
     acc1.setId("acc1");
     acc1.setParent(accordion.getId());
     acc2.setId("acc2");
     acc2.setParent(accordion.getId());

     acc1.setHeading("acc1");
     acc1.add(new HTML("acc1 content"));
     acc2.setHeading("acc2");
     acc2.add(new HTML("acc2 content"));
     accordion.add(acc1);
     accordion.add(acc2);
     fp.add(accordion);
     Button b = new Button("collapse");
     b.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
           acc1.hide();
           acc2.hide();
        }
     });
     fp.add(b);

     add(fp);
  } 

  public void configureAccordion() {
     Collapse.configure(acc1.getId(), accordion.getId(), false);
     Collapse.configure(acc2.getId(), accordion.getId(), false);

  }

 }

This example works well until I click on the collapse button and try to play again with the accordion. At least one of the group won't show up anymore.
If acc1 is opened when I click on the collapse button, acc2 won't open when I click on it.
If acc2 is opened when I click on the collapse button, acc1 won't open when I click on it.
if none of the groups are opened, they won't be openable after the collapse action.

What version of GWT-Bootstrap are you using ? (For your information, I get the latest Snapshot here : http://oss.sonatype.org/content/repositories/snapshots/com/github/gwtbootstrap/gwt-bootstrap/2.3.2.0-SNAPSHOT/gwt-bootstrap-2.3.2.0-20140111.211743-56.jar)

By the way, I was unable to see your changes on the showcase (I checked : http://gwtbootstrap.github.io/#component:modal)

I know I can fix this by recreating the accordion each time I show/hide a group as a workaround, but it is not very efficient...

Thanks again for your time !

Julien

ghost assigned reinert Dec 4, 2013

reinert mentioned this issue Jan 10, 2014

Release and deploy clarifications #463

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

r0b- commented Nov 19, 2013

reinert commented Nov 22, 2013

r0b- commented Nov 22, 2013

JulienOrain commented Dec 4, 2013

r0b- commented Dec 4, 2013

reinert commented Dec 4, 2013

JulienOrain commented Dec 4, 2013

reinert commented Dec 4, 2013

reinert commented Dec 4, 2013

JulienOrain commented Dec 4, 2013

reinert commented Dec 4, 2013

reinert commented Dec 4, 2013

reinert commented Dec 4, 2013

JulienOrain commented Dec 4, 2013

JulienOrain commented Dec 4, 2013

JulienOrain commented Jan 9, 2014

reinert commented Jan 9, 2014

reinert commented Jan 9, 2014

reinert commented Jan 11, 2014

JulienOrain commented Jan 11, 2014

reinert commented Jan 11, 2014

reinert commented Jan 11, 2014

JulienOrain commented Jan 11, 2014

reinert commented Jan 11, 2014

JulienOrain commented Jan 11, 2014

reinert commented Jan 12, 2014

reinert commented Jan 12, 2014

JulienOrain commented Jan 12, 2014

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

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

Comments

r0b- commented Nov 19, 2013

reinert commented Nov 22, 2013

r0b- commented Nov 22, 2013

JulienOrain commented Dec 4, 2013

r0b- commented Dec 4, 2013

reinert commented Dec 4, 2013

JulienOrain commented Dec 4, 2013

reinert commented Dec 4, 2013

reinert commented Dec 4, 2013

JulienOrain commented Dec 4, 2013

reinert commented Dec 4, 2013

reinert commented Dec 4, 2013

reinert commented Dec 4, 2013

JulienOrain commented Dec 4, 2013

JulienOrain commented Dec 4, 2013

JulienOrain commented Jan 9, 2014

reinert commented Jan 9, 2014

reinert commented Jan 9, 2014

reinert commented Jan 11, 2014

JulienOrain commented Jan 11, 2014

reinert commented Jan 11, 2014

reinert commented Jan 11, 2014

JulienOrain commented Jan 11, 2014

reinert commented Jan 11, 2014

JulienOrain commented Jan 11, 2014

reinert commented Jan 12, 2014

reinert commented Jan 12, 2014

JulienOrain commented Jan 12, 2014