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

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

Comments

Projects
None yet
7 participants

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)

Owner

mdo commented Feb 6, 2013

Closing out until we can get a jsfiddle with this.

@mdo mdo closed this Feb 6, 2013

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..

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 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 commented Mar 3, 2013

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

@rvanlaar rvanlaar referenced this issue in lizardsystem/lizard-maptree May 29, 2013

Open

Accordion hangs on empty <div>. #4

Also experiencing this. Not very usable on dynamic apps.

Owner

cvrebert commented Sep 19, 2013

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

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