Create a gist now

Instantly share code, notes, and snippets.

# Wraps the passed-in block in an expando/collapso triangle thingy.
# Uses "arrows.png" which is a sprite that I think I got from jQuery.
class Expando < Erector::Widget
needs :title, :expanded => false
external :js, "/lib/jquery.livequery.js"
external :style, <<-STYLE
.expando .title {
cursor: pointer; cursor: hand;
}
.expando div.arrow {
background:transparent url(/icons/arrows.png) no-repeat scroll 0px -16px;
width:16px; height:16px;
display: block;
margin-right: .5em;
}
.expando .title b {
font-size: 14px;
}
.expando div.arrow.closed { background-position:0px 0px;}
STYLE
external :js, "/lib/jquery.js"
# we need to use a livequery because we're going to load some of these again via AJAX
external :jquery, <<-SCRIPT
$('.expando').livequery(function() {
var title = $(this).find('.title');
var arrow = $(this).find('.arrow');
var expando_content = $(this).find('.expando_content');
title.click(function() {
arrow.toggleClass('closed');
expando_content.slideToggle(500, function() {
$(window).trigger('resize');
title.get(0).scrollIntoView();
});
});
});
SCRIPT
def content
div :class => 'expando' do
div :class => 'title' do
classes = %w(arrow left)
classes << "closed" unless @expanded
div :class => classes
b @title
end
div :class => 'expando_content', :style => @expanded ? '' : 'display: none' do
call_block
end
end
end
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment