Stackoverflow 2013-06-10

by john_s

HTML

<div id="board">
</div>
<div id="clueContainer" style="display: none;">
<div>

JavaScript

var values = ['$100', '$200', '$300'];

var categories = [
    {
        name: 'Category 1',
        clues: [
            'clue A1',
            'clue A2',
            'clue A3'
        ]
    },
    {
        name: 'Category 2',
        clues: [
            'clue B1',
            'clue B2',
            'clue B3'
        ]
    }
];

$.each(categories, function(i, category) {
    var $clueList = $('<ul></ul>');
    $.each(category.clues, function(i, clue) {
        $clueList.append('<li><a class="clueLink" href="#">' + values[i] + '</a></li>');
    });
    var $category = $('<div class="category"></div>');
    $category.append('<p>' + category.name + '</p>');
    $category.append($clueList);
    $('#board').append($category);
});

$('#board').on('click', '.clueLink', function(e) {
    e.preventDefault();
    var clueIndex = $(this).closest('li').index(),
        categoryIndex = $(this).closest('.category').index();
    $('#clueContainer').text(categories[categoryIndex].clues[clueIndex]).slideUp('slow').slideDown('slow');
});