I have the following configuration:$('document').ready(function () {    var what0 = [        [http://validator.w3.org/unicorn/, Unicorn],        [http://validator.w3.org/, W3C Validation Service],        [http://jigsaw.w3.org/css-validator/, W3c CSS Validator],        [http://text-compare.com/, Text Compare!]    ],        what1 = [            [https://imgflip.com/, Imgflip.com],            [http://jpillora.com/base64-encoder/, Base64 Encoder],            [http://www.showmycode.com/, Adobe Flash Decompiler],            [http://jsbeautifier.org/, Beautify Js]        ],        what2 = [            [http://plnkr.co/edit/?p=catalogue, Plunker],            [http://www.css3maker.com/index.html, CSS3 Generator],            [http://daneden.github.io/animate.css/, Animate.css],            [http://site.youidraw.com/, YouDraw]        ],        what3 = [            [http://realfavicongenerator.net/, Favicon Generator],            [http://grabicon.com/, Grabicon],            [http://www.buildmypinnedsite.com/en, Windows 8.1 tile],            [https://kraken.io/web-interface, Kraken.io]        ],        what4 = [            [http://ideone.com/rran1v, C++0x Compiler],            [http://webcompiler.cloudapp.net/, online C++ compiler],            [http://www.color-hex.com/, Color Hex],            [https://icomoon.io/app/#/select, IcoMoon App]        ],        wh = [what0, what1, what2, what3, what4];    function Toggle(elem) {        var hiding = document.getElementById(hiding + elem),            buttonforhiding = document.getElementById(buttonforhiding + elem);        $(hiding).hide();        $(buttonforhiding).click(function () {            $(hiding).toggle();        });    }    for (var a = 0; a <= 4; a++) {        Toggle(a.toString());    }    function populate(one, two) {        var where = document.getElementById(hiding + one),            what = two,            length = what.length - 1;        for (var b = 0; b <= length; b++) {            var vector = what[b];            $(where).append('<li><a href=' + what[b][0] + ' target=_blank>' + what[b][1] + '</a></li>');        }    }    for (var c = 0; c <= 4; c++) {        var d = wh[c];        populate(c, d);    }});ul {    list-style-type:none;}<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script><ul>    <li>        <div id=buttonforhiding0>Folder 1</div>    </li>    <li>        <ul id=hiding0></ul>    </li>    <li>        <div id=buttonforhiding1>Folder 2</div>    </li>    <li>        <ul id=hiding1></ul>    </li>    <li>        <div id=buttonforhiding2>Folder 3</div>    </li>    <li>        <ul id=hiding2></ul>    </li>    <li>        <div id=buttonforhiding3>Folder 4</div>    </li>    <li>        <ul id=hiding3></ul>    </li>    <li>        <div id=buttonforhiding4>Folder 5</div>    </li>    <li>        <ul id=hiding4></ul>    </li></ul>Its role is to populate some lists with the links in the what0, what1, what2, etc. arrays. It is working fine, but I was interested if you can come up with a code that is more efficient.The requirements are:The input data is the arrays called what*, from 0 to any given number of arrays.The output is the folder-style type lists. Also, these lists are initially hidden and shown only onclick.The script must be using only JavaScript and jQuery.
Populating lists with links from arrays
javascript;jquery;html
Your what variable would be more accessible if it was just an JavaScript Object (w3school javascript objects), instead of list of lists.var what_object = {    what: [        [            {                link: http://validator.w3.org/unicorn/,                text: Unicorn            },            {                link: http://validator.w3.org,                text: W3C Validation Service            },            {                link: http://jigsaw.w3.org/css-validator/,                text: W3c CSS Validator            },            {                link: http://text-compare.com/,                text: Text Compare!            }        ],        [            {                link: https://imgflip.com/,                text: Imgflip.com            },            {                link: http://jpillora.com/base64-encoder/,                text: Base64 Encoder            },            {                link: http://www.showmycode.com/,                text: Adobe Flash Decompiler            },            {                link: http://jsbeautifier.org/,                text: Beautify Js            }        ]    ]};I have only done indexes 0, and 1.jQuery.fn.loadWhatList = function(list_location) {    if (Number(list_location) >= 0) {        var selected_list_section = what_object.what[list_location];        if (typeof(selected_list_section) === 'undefined') {            return false;        };        for (var y = 0; y < selected_list_section.length; y++) {            var selected_link = selected_list_section[y]; // The selected link            var compiled_link = jQuery(<li><a></a></li>);            compiled_link.find('a').attr('href', selected_link.link);            compiled_link.find('a').html(selected_link.text);            // Can also do all of your Click Events in here too...            compiled_link.click(function(e) {                jQuery(this).toggle();            });            // Load the compiled_link to the ELEMENT            jQuery(this).append(compiled_link);        };        return true;    };    return false;};