Created
April 17, 2012 20:30
-
-
Save agarciadelrio/2408797 to your computer and use it in GitHub Desktop.
Getting active_admin panels become collapsable with non-intrusive javascript with jquery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//....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()}); | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ... 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; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# ... 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 |
Rails 4.2.1, AA 1.1.0 - works. But I needed to remove , @section.options.merge(:icon => @section.icon)
Thanks amigo!
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
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