JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<ul id="expList">
    <li>test
        <ul>
            <li>one</li>
            <li>two</li>
        </ul>
    </li>
    <li>
        Test 2
    </li>
        <li>test 123
        <ul>
            <li>three</li>
            <li>four</li>
        </ul>
    </li>
</ul>

<button id="expandList">Expand All</button>
<button id="collapseList">Collapse All</button>

CSS

#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
}

/* Collapsed state for list element */
#expList .collapsed {
    background-image: url(../../tree/img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url(../../tree/img/expanded.png);
}
#expList {
    clear: both;
}

JavaScript

function prepareList() {

    $('#expList').find('li:has(ul)').click(function (event) {

        if(this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        //return false;
    }).addClass('collapsed').children('ul').hide();

    //Create the button funtionality
    $('#expandList').click(function () {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    })
    $('#collapseList').click(function () {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    })
    // alert('END prepare ORIGINAL');  
};

$(document).ready(function () {
    prepareList();
});