Untitled

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type='text/javascript' src='jquery-1.7.2.min.js'></script>
    <script type='text/javascript' src='folder.js'></script>
    <link rel='stylesheet' type='text/css' href='style.css'></link>
    <title>Folder Example</title>
  </head>
</html>

div.folder-header
{
  background-color:#f0f0f0;
  border-color:#e0e0e0;
  border-width:1px;
  cursor:pointer;
}

div.folder-body
{
  background-color:#f8f8f8;
  border-color:#e0e0e0;
  border-width:1px;
}

div.link-viewport
{
  position:relative;
}

img.link-image
{
  position:absolute;
  display:block;
  border:none;
}

$(document).ready(function()
{
    var border = true;

    var folder = function(title, src)
    {
        var section = $('<div>').appendTo('body');
        var header = $('<div>').addClass('folder-header').text(title).appendTo(section);
        var folder = $('<div>').addClass('folder-body').appendTo(section);
        var viewport = $('<div>').addClass('link-viewport').css('width', 64).css('height', 64).appendTo(folder);
        var image = $('<img>').addClass('link-image').attr('src', src).appendTo(viewport);

        header.css('border-style', border ? 'solid' : 'none');
        folder.css('border-style', border ? 'solid' : 'none');

        header.click(function()
        {
            folder.toggle();
        });
    };

    folder("Red", "red.png");
    folder("Green", "green.png");
    folder("Blue", "blue.png");
});

if (folder.height()) {
    folder.hide();
    folder.height(0); }
else {
    folder.show();
    folder.height(64);
}