My Fid

Test Sandbox

by Eric M

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="DeptWrapper">Departments
    <div class="lvl1" style="display: block;">Administration
        <div class="lvl2">Accounting Division</div>
        <div class="lvl2">Administration Services</div>
        <div class="lvl2">Budget Division</div>
        <div class="lvl2">Collections Division</div>
        <div class="lvl2">Human Resources Division</div>
        <div class="lvl2">Information Technology Division</div>
        <div class="lvl2">Purchasing Division</div>
        <div class="lvl2">Records Management Division
            <div class="lvl3" style="display: none;">Imaging</div>
            <div class="lvl3" style="display: none;">Record Transmittals</div>
            <div class="lvl3" style="display: none;">RM Mail Division</div>
        </div>
        <div class="lvl2">Risk Management Division</div>
        <div class="lvl2">Tax Listing</div>
    </div>
    <div class="lvl1" style="display: block;">Circuit Court
        <div class="lvl2" style="display: none;">Civil Court</div>
        <div class="lvl2" style="display: none;">Clerk of Circuit Court</div>
        <div class="lvl2" style="display: none;">Court Officials</div>
        <div class="lvl2" style="display: none;">Criminal ＆ Traffic Court</div>
        <div class="lvl2" style="display: none;">Family Court</div>
        <div class="lvl2" style="display: none;">Jury Services</div>
        <div class="lvl2" style="display: none;">Juvenile Court</div>
        <div class="lvl2" style="display: none;">Probate Court</div>
    </div>
    <div class="lvl1" style="display: block;">Corporation Counsel
        <div class="lvl2" style="display: none;">Child Support</div>
        <div class="lvl2" style="display: none;">Legal</div>
    </div>
    <div class="lvl1" style="display: block;">County Board</div>
    <div class="lvl1" style="display: block;">County Executive</div>
    <div class="lvl1" style="display: block;">County...

CSS

.DeptWrapper {
    margin-top:20px;
    font-weight:bold;
    display:inline-block;
}
.lvl1 {
    margin-left:5px;
    font-weight:default;
}
.lvl2 {
    margin-left:10px;
    font-weight:default;
    color:default;
}
.lvl3 {
    margin-left:15px;
    font-weight:default;
    color:default;
}
.lvl4 {
    margin-left:20px;
    font-weight:default;
    color:default;
}

JavaScript

$('div').click(function (e) {
    e.stopPropagation();
    $(this).children().toggle('blind', 700);
});

// only red level 1 terms
if ($('div.lvl1').has('div.lvl2')) {
    $('div.lvl1').css('color','red');
}