Populating lists with links from arrays

Question

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:

1. The input data is the arrays called "what*", from 0 to any given number of arrays.
2. The output is the folder-style type lists. Also, these lists are initially hidden and shown only onclick.
3. The script must be using only JavaScript and jQuery.

Answer 1

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;
};

Answer 2

Store the whats as an array:

var whats = [
    [ // what0
        {
            "url": "http://validator.w3.org/unicorn/",
            "title": "Unicorn"
        }
    ]

    [ // what1
    ]
]

Use jQuery for everything:

var hiding = document.getElementById("hiding" + elem),
buttonforhiding = document.getElementById("buttonforhiding" + elem);
$(hiding).hide();
$(buttonforhiding).click(function () {
    $(hiding).toggle();

Can be easily written as:

$("#hiding"+elem).hide();
$("#buttonforhiding"+elem).onClick(...);