Question

Here is what I have so far. http://jsfiddle.net/Scybf/22/

$('[id^=content]').hide();
$('#baseSection, #headSection').on("click", "li", function () {
    var id = ($(this).parent().attr('id') == 'selectable') ? $(this).attr('id').replace('base', '') : $(this).attr('id').replace('head', '');
    $("#customContent").html($("#content-" + id).html());
});

What I need it to do is take the ID’s of base and head to equal content. example, base1 + head1 = content1 or base1 + head 2 = content2.

Any help would be much appreciated.

Answer 1

This can help you:

You need to defined if the user clicked on a head or base element:

function isBase(element){
    return element.parents('div').attr('id').indexOf('base') !== -1;
} 

function isHead(element){
    return element.parents('div').attr('id').indexOf('head') !== -1;
} 

Then you can create a buffer object:

var buffer = {head: null, base: null};

Then you just need to save the user action and display it in your baseContent element

$('#baseSection, #headSection').on("click", "li", function () {
    if (isHead($(this))) {
        buffer.head = $(this).text();
    } else if (isBase($(this))) {
        buffer.base = $(this).text();
    }

    $("#baseContent").html(
        "Head: " + buffer.head + "<br/>Base:" + buffer.base);
});