Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
nnseva opened this Issue · 8 comments

7 participants

@nnseva

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>

2) Open a modified page and try to toggle the third item ('Collapsible EMPTY Group Item)
3) 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
Owner
mdo commented

Closing out until we can get a jsfiddle with this.

@mdo mdo closed this
@guyisra

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

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

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

@guyisra

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

@rvanlaar rvanlaar referenced this issue in lizardsystem/lizard-maptree
Open

Accordion hangs on empty <div>. #4

@tylerdavis

Also experiencing this. Not very usable on dynamic apps.

@cvrebert
Owner

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

@mfkp

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
Something went wrong with that request. Please try again.