javascript click image display

Question

What I'm trying to do is, when one of six divs is clicked, a separate div will have 3 specific divs appear in it. Each of the original six divs have three similar but different divs related to it.

http://jsfiddle.net/petiteco24601/hgo8eqdq/

$(document).ready(function () {
    $(".talkbubble").mouseout(function(){
        $(".sidebar").show();
});$
    $(".talkbubble").click(function(){
        $

How do I make it so that when you click a "talkbubble" div, a different "sidebar" div appears with all its contained elements, and when you mouseout, the first talkbubble div automatically activates?

Answer 1

Here is a demo of how to do this: http://jsfiddle.net/n1xb48z8/2/

The main part of this example is some javascript that looks like this:

$(document).ready(function(){
    showSideBar(1);
    $('.expander').click(function(){
        var sidebarIndex = $(this).data('sidebar-index');
        showSideBar(sidebarIndex);
    });
    $('#Container').mouseleave(function(){
        showSideBar(1);
    });

});

function showSideBar(index){
    $('.sidebarContent').hide();
    $('.sidebarContent[data-index="' + index + '"]').show();
}

.data('some-name') will get you the attribute data-some-name="" on the specific element, this is a html 5 attribute and if you do not want to use it you can instead give each of the elements their own class names such as:

<div class="sidebarContent subBarContent_1">
    <!-- content -->
</div>

and use the '.subBarContent_1' as your jquery selector instead. You would then also have to have some sort of data attached to your clickable divs to identify which one you wanna show, you could use a hidden field to do that like:

<input type="hidden" class="subContentSelector" value="subBarContent_1" />

The javascript for that looks like this:

$(document).ready(function(){
    showSideBar(1);
    $('.expander').click(function(){
        var sidebarSelector = $(this).find('.subContentSelector').val();
        showSideBar(sidebarSelector );
    });
    $('#Container').mouseleave(function(){
        showSideBar('subBarContent_1');
    });

});

function showSideBar(selector){
    $('.sidebarContent').hide();
    $('.sidebarContent.' + selector).show();
}

Ps. the overflow:hidden css is because chrome was messing up the placement of the sidebar content otherwise... oh chrome, you silly goose