Skip to content

Instantly share code, notes, and snippets.

@agarciadelrio
Created April 17, 2012 20:30
Show Gist options
  • Select an option

  • Save agarciadelrio/2408797 to your computer and use it in GitHub Desktop.

Select an option

Save agarciadelrio/2408797 to your computer and use it in GitHub Desktop.
Getting active_admin panels become collapsable with non-intrusive javascript with jquery
//....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()});
}
});
});
# 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
// ... 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;
}
}
}
# ... 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
@erotenberg1
Copy link
Copy Markdown

thank you, this is incredibly useful. tested with AA 2.7.0, Rails 6, Ruby 2.6.5.
Just have to add two small image files "arrow_down.gif" and "arrow_up.gif" into app/assets/images to make it complete

@yshmarov
Copy link
Copy Markdown

Rails 4.2.1, AA 1.1.0 - works. But I needed to remove , @section.options.merge(:icon => @section.icon)
Thanks amigo!

@esthervillars
Copy link
Copy Markdown

thank you! still works with Rails 6.1 AA 2.9

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment