markup.jade

#sidebar

    .sidebar-item.open
        .title Item 1
        .info
            label Some controls
                input(type='checkbox')
            label More controls
                input(type='checkbox')
            label Other controls
                input(type='checkbox')

notes.md

Rollup test

Note: this is a sample Proto project. For more information, see this walkthrough.

I think the rollup works best at 0.25s. Any slower and it feels sluggish, and faster is too abrupt.

script.coffee

$('.sidebar-item .title').on 'click', ->
    $(this).parent().toggleClass('open')

$('label').each ->
    $label = $(this)
    console.log this
    $label.on 'click', (e) ->
        e.stopImmediatePropagation()
        e.stopPropagation()
        if $label.find('input').is(':checked')
            $label.addClass('active')
        else
            $label.removeClass('active')

settings.json

{
    "name": "sampleproto",
    "proto_version": "0.0.4",
    "script_libraries": [
        "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.0/underscore.string.min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"
    ],
    "style_libraries": [
        "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css"
    ]
}

style.styl

transition(prop, dur)
    -webkit-transition-property: prop
    -webkit-transition-duration: dur
    -moz-transition-property: prop
    -moz-transition-duration: dur
    -ms-transition-property: prop
    -ms-transition-duration: dur
    -o-transition-property: prop
    -o-transition-duration: dur
    transition-property: prop
    transition-duration: dur


#sidebar
    border: 1px solid #ccc
    width: 300px

sidebar_item_height = 50px
sidebar_item_padding = 10px
.sidebar-item
    height: sidebar_item_height
    overflow: hidden
    font-family: Helvetica
    font-weight: 700
    transition(height, 0.25s)
    &.open
        height: 200px
    .title
        font-size: 25px
        height: sidebar_item_height + 1
        padding: sidebar_item_padding
        box-sizing: border-box
        cursor: pointer
        border-bottom: 1px solid #ccc
        background-color: #eee

    .info

    label, input
        cursor: pointer

    label
        display: block
        padding: sidebar_item_padding
        &:hover, &.active:hover
            background-color: #eee
        &.active
            background-color: #dfd
        &:active
            background-color: #ddd
    input
        float: right