Getting active_admin panels become collapsable with non-intrusive javascript with jquery

active_admin.js

//....add this in app/assets/javascript/active_admin.js
$(function(){
// CONFIGURE PANELS COLLAPSER
  $(".panel[data-panel]").each(function(){
    var $this = $(this);
    var $a = $("<a href='javascript:void(null)'>").on("click",function(event){
      $(this).closest(".panel").find(".panel_contents").each(function(){
        $(this).slideToggle();
      });
      $(this).closest("h3").each(function(){
        $(this).toggleClass("panel-collapsed");
      });
    })
    var $h3 = $this.find("h3:first");
    $h3.each(function(){$(this).wrapInner($a)});
    if( $this.data("panel")=='collapsed' ) {
      $h3.each(function(){$(this).addClass('panel-collapsed')});
      $this.find(".panel_contents").each(function(){$(this).hide()});
    }
  });
});

active_admin.rb

# even if you want make sidebars collapsables do
# ... add this in config/initializers/active_admin.rb

ActiveAdmin::Views::SidebarSection.class_eval do
  def build(section)
    @section = section
    # original file
    # super(@section.title, :icon => @section.icon)
    # modified version
    super(@section.title, @section.options.merge(:icon => @section.icon))
    self.id = @section.id
    build_sidebar_content
  end
end

appassetsstylesheetsactive_admin.css.scss

// ... add this in app/assets/stylesheets/active_admin.css.scss
.panel[data-panel] h3 {
  & a {
    background: transparent url("arrow_up.gif") right 50% no-repeat;
    padding-right: 10px;
  }
  &.panel-collapsed {
    & a {
      background: transparent url("arrow_down.gif") right 50% no-repeat;
    }
  }
}

example.rb

# ... add this in app/admin/example.rb
panel :jobs, 'data-panel' => :open do
  # your panel content
end

panel :invoices, 'data-panel' => :collapsed do
  # your panel content
end

sidebar :expedient, :only => [:show, :edit, :assign_jobs], "data-panel" => :collapsed do
  # your sidebar content
end