Question

This is the sequel to this thread:
4 toggle buttons speak javascript to each other but none of them are good listeners

Our heros have overcome the ridiculous amount of nonsense originally presented in the fiddle http://jsfiddle.net/EjW7A/8/ (no longer available) when @nbrooks -reinvigorated by the forces of good- conquered all of the stupidly placed arrays, functions and the mammoth amount of redundant content with his solution:

http://jsfiddle.net/EjW7A/24/

We rejoin Luhring after 8 hours of poking, prodding, red bull drinking, concrete wall head-bashing at the final step of solving the epic problem of doom- implementation:

The new fiddle:

http://jsfiddle.net/Luhring/EjW7A/38/

Problem:

How can I insert the content dynamically- allowing each button to toggle it’s own content while making sure the other buttons are toggled off and their content hidden? ex, if button 1 is toggled on (it is animated as if it were a ‘real’ pressed button), button 1s content is displayed in a gallery where the contents can be clicked to display a lightbox. when button 2 is clicked should toggle button 1 off and replace button 1’s contents with its own.

Answer 1

New Working Demo

Anything invoking jQuery on DOM elements must be wrapped within the DOM ready function to work correctly (this is why your $('a').click() was failing. Also, normally if you see yourself creating multiple arrays that you never end up using, and still end up referencing each element directly, you’re making a lot of wasted effort. I cleaned your code up a bit – take a look:

jQuery(document).ready(function($) {
    //variable declaration section.
    var contentArray = ['albumArt', 'logoDesign', 'UX', 'other'],
        content = {}, newClassName, $selectedArray, i;

    for ( i = 0; i < contentArray.length; i++) {
        var className = contentArray[i];
        content[className] = $('.' + className);
    }

    //prevent links that are clicked from going anywhere
    $("a").click(function(e) {
        e.preventDefault();
    });

    $('.workTypes').click(function() {
        if ($(this).is('#centeringDiv a')) return;

        $(this).toggleClass('workTypesSelected');
        $('.workTypesSelected').not(this).removeClass('workTypesSelected');

        $selectedArray = content[$('.workTypesSelected').attr('id')];
        $('#galleryDiv').empty();

        if ( $selectedArray ) {
            // note creates #largeGallery elements dynamically
            for ( i = 0; i < $selectedArray.length; i++ ) {
                var $selected = $selectedArray.eq(i);

                $('<a>').attr({
                    href: $selected.attr('href'),
                    title: $selected.attr('title'),
                    class: "lb_gal"
                }).append(
                    $('<img>').attr({
                        id: "largeGallery"+i,
                        src: $selected.attr('href'),
                        class: "gallery cf"
                    }).rlightbox()
                )
                .appendTo('#galleryDiv')
                .rlightbox();
            }
        }

    }); // end click handler
}); //end the document ready jquery function​