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.