bootstrap accordion - keep fix position of lower contents

Question

I am new to css. Currently when we click on the anchor "Collapsible Group Item", it opens the panel body,and the below label is shifted below. I want to keep my accordion contents to be overlapped, so that the lower content's position will not resize, their position will be fixed.In this case it should be overlapped on the "success" label.

here is jsfiddle link. http://jsfiddle.net/pmd/g8V7Q/4/

Thanks in advance.

Answer 1

You need to use CSS to absolute position the panel when it's opened like this..

#accordion .collapsing, #accordion .collapse.in
{
  position: absolute !important;
  z-index: 20;
  width: auto;
  overflow:visible;
  background-color:#fff;
}

Demo: http://bootply.com/6e0pnrm7fL