1

Thanks to this SO question and this SO question, I have been able to create a Bootstrap accordion with

  • A fully clickable header for each panel
  • Chevron arrows on the right indicating the state of a panel

Now, I noticed a little bug when expanding/collapsing a panel: the content on the far right side of the expanding/collapsing panel is pushed to the left a little during the animation, and suddenly jumps to its normal position when it's complete.
I'm guessing it has this behaviour because of the float attached to the chevron icon.

I've created a JSFiddle demonstrating the problem, and here's the code:

HTML:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
             <h4 class="panel-title">Item #1</h4>

        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">Content #1</div>
        </div>
    </div>
    ...
</div>

CSS: (did I mention I used a pure CSS solution?)

.panel-heading.accordion-toggle:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: right;
    position: relative;
    bottom: 23px;
    font-size: 15pt;
    color: grey;
}
.panel-heading.accordion-toggle.collapsed:after {
    content:"\e080";
}

I'm sure it's just a little thing, but I can't seem to find it.

Community
  • 1
  • 1
Pieter VDE
  • 2,195
  • 4
  • 25
  • 44

1 Answers1

2

How about setting the icon position: absolute; and the parent .parent-heading position: relative; ? By that you don't affect any elements which may result in unpredictable behaviour.

.panel-heading{
    position: relative;
}

.panel-heading.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family:'Glyphicons Halflings';
    /* essential for enabling glyphicon */
    content:"\e114";
    /* adjust as needed, taken from bootstrap.css */
    float: right;
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 15pt;
    /* adjust as needed */
    color: grey;
    /* adjust as needed */

}

Here's the modified fiddle.

miron
  • 1,361
  • 1
  • 11
  • 24