Support - jQuery CDN Zoya Pasha  2017-11-13 00:23
Status: Closed
 
<script>
    LABKEY.Utils.requiresScript("https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js");
    LABKEY.Utils.requiresScript("https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js");
    LABKEY.Utils.requiresCSS("https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css");

//code.stephenmorley.org
var CollapsibleLists=function(){function e(b,c){[].forEach.call(b.getElementsByTagName("li"),function(a){c&&b!==a.parentNode||(a.style.userSelect="none",a.style.MozUserSelect="none",a.style.msUserSelect="none",a.style.WebkitUserSelect="none",a.addEventListener("click",g.bind(null,a)),f(a))})}function g(b,c){for(var a=c.target;"LI"!==a.nodeName;)a=a.parentNode;a===b&&f(b)}function f(b){var c=b.classList.contains("collapsibleListClosed"),a=b.getElementsByTagName("ul");[].forEach.call(a,function(a){for(var d=a;"LI"!==d.nodeName;)d=d.parentNode;d===b&&(a.style.display=c?"block":"none")});b.classList.remove("collapsibleListOpen");b.classList.remove("collapsibleListClosed");0<a.length&&b.classList.add("collapsibleList"+(c?"Open":"Closed"))}return{apply:function(b){[].forEach.call(document.getElementsByTagName("ul"),function(c){c.classList.contains("collapsibleList")&&(e(c,!0),b||[].forEach.call(c.getElementsByTagName("ul"),function(a){a.classList.add("collapsibleList")}))})},applyTo:e}}();

//code.stephenmorley.org
var runOnLoad=function(c,o,d,e){function x(){for(e=1;c.length;)c.shift()()}o[d]?(document[d]('DOMContentLoaded',x,0),o[d]('load',x,0)):o.attachEvent('onload',x);return function(t){e?o.setTimeout(t,0):c.push(t)}}([],window,'addEventListener');
</script>

    <div data-role="main" class="ui-content">
<a href="#myPopup" data-rel="popup" id='pButton'>Select Option</a>
    <div data-role="popup" id="myPopup" class="ui-content" style='min-width:250px'>
        <form>
            <div>
                <ul class="collapsibleList">
                    <li class='li'>
                        1
                        <ul>
                            <li class='li'>1.1
                                <ul>
                                    <li><a class='col'>1.1.1</a></li>
                                    <li><a class='col'>1.1.2</a></li>
                                </ul>
                            </li>
                            <li class='li'>1.2
                                <ul>
                                    <li><a class='col'>1.2.1</a></li>
                                    <li><a class='col'>1.2.2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class='li'>
                        2
                        <ul>
                            <li class='li'>2.1
                                <ul>
                                    <li><a class='col'>2.1.1</a></li>
                                    <li><a class='col'>2.1.2</a></li>
                                </ul>
                            </li>
                            <li class='li'>2.2
                                <ul>
                                    <li><a class='col'>2.2.1</a></li>
                                    <li><a class='col'>2.2.2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </form>
    </div>
    <div id='OntSelected'></div>
</div>

<script>
    runOnLoad(function(){
        CollapsibleLists.apply();
    });
    $('.col').click(function(){
        $('#OntSelected').text($(this).text());
        alert('HI');
    });
</script>

<style>
    .collapsibleList li{
      list-style-image : url('add.png');
      cursor : auto;
    }

    li.collapsibleListOpen{
      list-style-image : url('minus.png');
      cursor : pointer;
    }

    li.collapsibleListClosed{
      list-style-image : url('add.png');
      cursor : pointer;
    }

    .col{
        color:#1A5276;
        margin: 1px 1px;
    }
    .col:hover{
        color:#1A5276;
        font-weight:bold;
        margin: 1px 1px;
    }
</style>