How is something “selected” which then triggers an event?

What I mean by this is for example, you have two containers, one on the left, one on the right.

Content is in the left and when you “select” it, items are displayed on the right.

I could use a solution such as hiding via javascript / display: none/inline-block;

I thought of a radio button but I’m not sure if that is limited to a physical button, I had hoped on clicking the panel and the border is highlighted to signal that it has been selected.

Answer

Here is a fairly basic example. I think this is what you are trying to accomplish. http://jsfiddle.net/y8qko88g/1/

<div id="wrap">
    <input type="button" id="left" value="left" />
    <input type="button" id="right" value="right" />
</div>

$(function(){
    $("#right").hide();

    $("#left").click(function(){
        $("#left").hide();
        $("#right").show();
    });
    $("#right").click(function(){
        $("#left").show();
        $("#right").hide();
    });
});

UPDATE

Here is a little more advanced option done with only javascript. http://jsfiddle.net/1dy4ogzb/

<form id="radioButtons">
    <input type="radio" name="foo" value="left" checked="checked" />Left
    <br>
    <input type="radio" name="foo" value="right" />Right
</form>
<div id="left">this is left</div>
<div id="right" class="hideMe">this is right</div>

(function() {
    var trans = document.forms['radioButtons'].elements['foo'];
    var l = document.getElementById("left");
    var r = document.getElementById("right");

    for (var i=0, len=trans.length; i<len; i++) {trans[i].onchange = function() {
        if(this.value === "left"){
            l.className = "";
            r.className = "hideMe";
        } else{
            l.className = "hideMe";
            r.className = "";
        }
        };
    }
}());