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

• VannTile Ianito: Could you make a working code using this? You don't have to make all indexes, just copy the first two.
• Killrawr: I've added a jQuery function for processing each section of the list.
• Ismael Miguel: There's no such thing as an 'JSON object'.
• classicjonesynz: I used PHP to create the JSON code and just applied var what_object, adjusted answer to JavaScript Object. Regards
• Ismael Miguel: You're welcome. But why that PHP? Why don't you just use array( ... )?

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(...);