Expanding items

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="toprightfixed">
    <input type="text" id="search" placeholder="Type to search"><span id="expandcollapse" class="unselectable clickable">Expand All</span>

</div>
<div class="projectscontainer">
    <div class="destarrow arrow-right clickable"></div><span class="item destproject unselectable clickable" title="ID: 1141">ABC 5.8 CM5-DEF-FXxGibberish</span>

    <div class="projectschildren hidden">
        <div class="srcprojects"><span id="srcproject" class="item srcproject tooltip">Try to search this</span><span class="item srcproject tooltip" original-title="Checks">*</span><span class="item srcproject tooltip" original-title="Discussions">*</span><span class="item srcproject tooltip" original-title="Source Milestone">ABC_5.8_Patch2.15</span><span class="item srcproject tooltip purple" original-title="Assigned To">GOOG 4.1 M10</span>

        </div>
        <div class="srcprojects"><span id="srcproject" class="item srcproject tooltip">ABC-DEF-FXxGibberish</span><span class="item srcproject tooltip" original-title="Checks">*</span><span class="item srcproject tooltip" original-title="Discussions">*</span><span class="item srcproject tooltip" original-title="Source Milestone">ABC_5.8_Patch2.16</span><span class="item srcproject tooltip purple" original-title="Assigned To">GOOG 4.1 M10</span>

        </div>
        <div class="srcprojects"><span id="srcproject" class="item srcproject tooltip">ABC-DEF-FXxGibberish</span><span class="item srcproject tooltip" original-title="Checks">*</span><span class="item srcproject tooltip" original-title="Discussions">*</span><span class="item srcproject tooltip" original-title="Source Milestone">ABC_5.8_Patch2.7</span><span class="item srcproject tooltip purple" original-title="Assigned To">GOOG 4.1 M10</span>

        </div>
        <div class="srcprojects"><span id="srcproject" class="item srcproject...

CSS

body {
    font-family:"Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
    font-size: 0.9rem;
}
div.content {
    display: block;
}
.item {
    background-color: #00E6E6;
    display: inline-block;
    padding: 2px 5px;
    margin: 2px 0px;
}
.srcprojects {
    margin-left: 30px;
}
.destproject {
}
/*.destproject::-moz-selection, .destproject::selection {
	background-color:Transparent;
	color:#000;
}
*/
 .smalltext {
    font-size: 0.7rem;
}
.purple {
    background-color: #919AFF;
}
#expandcollapse {
    text-decoration: underline;
}
#toprightfixed {
    position: fixed;
    display: inline-block;
    font-weight: bold;
    margin: 3px 10px;
    right: 0;
}
.exception {
    background-color: #FA6699;
}
.null {
    background-color: #D1D1D1;
}
.hidden {
    display: none;
}
.clickable {
    cursor: pointer;
}
.unselectable {
    -webkit-user-select: none;
    /* Safari, Chrome */
    -khtml-user-select: none;
    /* Konqueror */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE */
    user-select: none;
    /* CSS3 */
}
span.row {
    width: 300px;
    display: inline-block;
}
.arrow-left {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid black;
}
.arrow-right {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid black;
    margin: 0 5px;
}
.arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}
.arrow-down {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    margin: 0 4px 4px 1px;
}
.clear {
    clear: both;
    margin: 10px 0;
}

JavaScript

var $projectscontainer = $('body').find('div.projectscontainer');
	var $projectschildren = $projectscontainer.find("div.projectschildren");
	var $destarrows = $projectscontainer.find("div.destarrow");
	var $srcprojects = $projectscontainer.find("div.srcprojects");
	var $rules = $srcprojects.find("div.srcproject");

	$projectscontainer.on("click", "span.destproject", function () {
	    $(this).siblings('div.projectschildren').toggle().end().siblings('div.destarrow').toggleClass("arrow-right arrow-down")
	}).on("click", "div.destarrow", function () {
	    $(this).parent().find("span.destproject").trigger("click");
	});

	$('body').on("click", "#expandcollapse", function () {
	    if ($(this).text() === 'Expand All') { //Currently collapsed
	        $destarrows.filter('div.arrow-right').toggleClass("arrow-right arrow-down");
	        $projectschildren.toggle(true);
	    } else { //Currently expanded            
	        var startTime = new Date().getTime();
	        $destarrows.filter('div.arrow-down').toggleClass("arrow-down arrow-right");
	        $projectschildren.toggle(false);
	    }
	    $(this).text(function (i, currentText) {
	        return currentText === 'Expand All' ? 'Collapse All' : 'Expand All';
	    });
	});

	var $searchproject = $srcprojects.find('#srcproject');
	$searchproject.each(function () {
	    console.log($(this).html());
	});
	var $searchprojectcontainer = $searchproject.parents('div.srcprojects');
	$('#search').keyup(function () {
	    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
	    $srcprojects.show();
	    $searchproject.filter(function () {
	        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
	        return !~text.indexOf(val);

	    }).parents('div.srcprojects').hide();
	});