JSFiddle - React, Tailwind, and code Playground

Collapse Panels for Tasked

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://jenniferperrin.com/tasks/css/custom.css">
<link rel="stylesheet" href="http://jenniferperrin.com/tasks/css/layout.css">
<link rel="stylesheet" href="http://jenniferperrin.com/tasks/css/tasked.css">
<div class="content-col" id="page">
	<div class="inner-content">
		<h4>
            Task List
            <span class="pull-right">
                <a href="#" class="btn btn-primary btn-xs" id="toggle-tasks"><i class="fa fa-list-alt" data-toggle="tooltip" data-placement="left" title="Toggle All Tasks"></i></a>
                <a data-toggle="modal" href="#newTask" class="btn btn-info btn-xs"><i class="fa fa-tasks" data-toggle="tooltip" data-placement="left" title="New Task"></i></a>
                <a data-toggle="modal" href="#newCategory" class="btn btn-warning btn-xs"><i class="fa fa-tag" data-toggle="tooltip" data-placement="left" title="New Category"></i></a>
            </span>
        </h4>
		<hr />

        <div class="panel panel-task">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#" data-perform="panel-collapse" class="toggle task-toggle" data-toggle="tooltip" data-placement="top" title="Toggle"><i class="fa fa-chevron-right"></i></a>
                    <a href="" data-toggle="tooltip" data-placement="top" title="View Task">Excepteur sint occaecat cupidatat</a>
                    <small><a href="" data-toggle="tooltip" data-placement="top" title="View Category">Category</a></small>
                    <div class="pull-right">
                        <a data-toggle="modal" href="#" class="success">
                            <i class="fa...

CSS

@import url(http://fonts.googleapis.com/css?family=Muli:400, 700);

.panel-task {
    margin-top: 20px;
    position: relative;
    border: 1px solid #dcdcdc;
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1);
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
    .panel-task:before {
        content: "";
        display: block;
        height: 5px;
        background: #a5cfe9;
        position: absolute;
        right: 2px;
        left: 2px;
        bottom: 100%;
    }

.panel-date {
    margin-top: 20px;
    position: relative;
    border: 1px solid #dcdcdc;
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1);
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
    .panel-date:before {
        content: "";
        display: block;
        height: 5px;
        background: #d5f0a0;
        position: absolute;
        right: 2px;
        left: 2px;
        bottom: 100%;
    }

.panel-task > .panel-heading h4.panel-title,
.panel-date > .panel-heading h4.panel-title { font-weight: 300; }
.panel-task > .panel-heading h4.panel-title small a { color: #999999; }
.panel-task > .panel-heading h4.panel-title small a:hover { color: #78a32d; }
.panel-date > .panel-heading h4.panel-title small { margin-left: 6px; }
    .panel-task > .panel-heading h4.panel-title a.toggle,
    .panel-date > .panel-heading h4.panel-title a.toggle {
        margin-right: 2px;
        margin-left: 0;
        color: #ccc;
    }

.panel-task > .panel-heading h4.panel-title a,
.panel-date > .panel-heading h4.panel-title a { margin-left: 4px; }
	.panel-task > .panel-heading h4.panel-title a.primary,
    .panel-date > .panel-heading h4.panel-title a.primary { color: #236b9b; }
		.panel-task > .panel-heading h4.panel-title a.primary:hover,
        .panel-date > .panel-heading h4.panel-title a.primary:hover { color: #15405d; }
	.panel-task > .panel-heading h4.panel-title a.info,
    .panel-date > .panel-heading h4.panel-title a.info {...

JavaScript

$(document).ready(function() {

	/** ******************************
	 * Collapse Panels
	 * [data-perform="panel-collapse"]
	 ****************************** **/
	(function($, window, document){
		var panelSelector = '[data-perform="panel-collapse"]';

		$(panelSelector).each(function() {
			var $this = $(this),
			parent = $this.closest('.panel'),
			wrapper = parent.find('.panel-wrapper'),
			collapseOpts = {toggle: false};

			if( ! wrapper.length) {
				wrapper =
				parent.children('.panel-heading').nextAll()
				.wrapAll('<div/>')
				.parent()
				.addClass('panel-wrapper');
				collapseOpts = {};
			}
			wrapper
			.collapse(collapseOpts)
			.on('hide.bs.collapse', function() {
				$this.children('i').removeClass('fa-chevron-down').addClass('fa-chevron-right');
			})
			.on('show.bs.collapse', function() {
				$this.children('i').removeClass('fa-chevron-right').addClass('fa-chevron-down');
			});
		});
		$(document).on('click', panelSelector, function (e) {
			e.preventDefault();
			var parent = $(this).closest('.panel');
			var wrapper = parent.find('.panel-wrapper');
			wrapper.collapse('toggle');
		});
	}(jQuery, window, document));
    
    /** ******************************
	 * Toggle All Tasks
	 ****************************** **/
    $('#toggle-tasks').click(function(e) {
        e.preventDefault();
        $('.task-toggle').toggleClass('in');
        if ($('.task-toggle').hasClass('in')) {
            $('.panel-wrapper').css({ 'height': "auto" });
            
            //if ($('.panel-wrapper').height() == '0') {
            if ($('.task-toggle i').hasClass('fa-chevron-right')) {
                $('.task-toggle i').removeClass('fa-chevron-right');
                $('.task-toggle i').addClass('fa-chevron-down');
            } else {
                $('.task-toggle i').removeClass('fa-chevron-down');
                $('.task-toggle i').addClass('fa-chevron-right');
            }
        } else {
            $('.panel-wrapper').css({ 'height': "0"...