Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

accordion does not work properly with zero-height collapsible #5849

Closed
nnseva opened this issue Nov 8, 2012 · 8 comments
Closed

accordion does not work properly with zero-height collapsible #5849

nnseva opened this issue Nov 8, 2012 · 8 comments
Labels

Comments

@nnseva
Copy link

nnseva commented Nov 8, 2012

How to reproduce

  1. Modify the first collapsible example:
  • remove class .accordion-inner from collapsible div
  • create one more accordion group with empty content
<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
<!--      <div class="accordion-inner"> -->
      <div>
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
<!--      <div class="accordion-inner"> -->
      <div>
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
        Collapsible EMPTY Group Item
      </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
<!--      <div class="accordion-inner"> -->
      <div>
      </div>
    </div>
  </div>
</div>
  1. Open a modified page and try to toggle the third item ('Collapsible EMPTY Group Item)
  2. Try to toggle not-empty (# 1 or # 2) item.

What is expected

The not-empty item is shown again.

What is happened

The not-empty item leaved non-visible (really style="height: 0px").

Tested with last accessible public release (2.2.1)

@mdo
Copy link
Member

mdo commented Feb 6, 2013

Closing out until we can get a jsfiddle with this.

@mdo mdo closed this as completed Feb 6, 2013
@guyisra
Copy link

guyisra commented Feb 24, 2013

here is a fiddle. -http://jsfiddle.net/uycBa/157/
List A causing the same problem
List B and C work until A is clicked..

@sherbrow
Copy link

Based on the doc example :
http://jsfiddle.net/Sherbrow/389Ny/

Tested against v2.3.0
Bug reproduced on Firefox 19 and Google Chrome 24 - transitions supported
Not present on IE9 - transition not supported - or if transitions disabled.

I think that because of the absence of content (height, padding, etc), the transition end event is never fired and the plugin keep its transitioning state active thus blocking any future action.

@guyisra
Copy link

guyisra commented Feb 24, 2013

note that this also happens on the bootstrap website on the collapse example if you delete one of the accordion-inner nodes

@guyisra
Copy link

guyisra commented Mar 3, 2013

@mdo can this be reopened please.. this issue is still relevant

@tylerdavis
Copy link

Also experiencing this. Not very usable on dynamic apps.

@cvrebert
Copy link
Collaborator

If this is still relevant to v3.0.0, please open a new issue with an updated JSFiddle or JS Bin example.

@mfkp
Copy link

mfkp commented Sep 20, 2013

Looks like it works fine with BS3. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

7 participants