JSFiddle - React, Tailwind, and code Playground

by toby3105

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="span3">
    <div class="well sidebar-nav">
        <ul class="nav nav-list" id="my-collapse-nav">
            <li class="nav-header">Reviews</li>
            <li class="divider"></li>
            <li><a href="#" data-target="#demo">Review 1</a> 
                <ul id="demo" class="collapse"
                style="height: 0px;">
                    <li><a href="#">Science Books</a><input type="checkbox" class="pull-right"/></li>
                    <li><a href="#">Computer Books</a><input type="checkbox" class="pull-right"/></li>
                    <li><a href="#">History Books</a><input type="checkbox" class="pull-right"/></li>
                     <div>0 of 3</div>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

input[type="checkbox"]{
    margin:2px;
    margin-right:4px;
}

JavaScript

$("#my-collapse-nav > li > a[data-target]").parent('li').hover(

function () {
    target = $(this).children('a[data-target]').data('target');
    $(target).collapse('show')
},

function () {
    target = $(this).children('a[data-target]').data('target');
    $(target).collapse('hide');
});