Bootstrap手风琴-折叠时更改顶部面板的位置

Question

I'm using bootstrap accordion plugin and my question is:

How can we change the position of the top panel when opened and return to its first position when closed. Please look at the photo:

Here is the pen ,

and thanks in advance,

Answer 1

I would do something like this using jQuery:

var original = $('#accordion').position().top;

$('.accordion-toggle').click(function(){
  var parent = $(this).data('parent');
  var body = $(this).attr('href');

  if($(body).is(":visible")) {
    $(parent).animate({top: original}, 350);
  }
  else {
    $(body).css({
        position: 'absolute',
        visibility: 'hidden',
        display: 'block',
        height: 'auto'
    });
  var offset = original - ($(body).height() / 2);
  $(body).removeAttr('style');
    $(parent).animate({top: offset}, 350); 
  } 
});

Hope is helps or puts you in the right direction.