How can I add a div on the left part and this will be showed only on the mouse click?

Question

How can I add a div on the left part and this will be showed only on the mouse click on the yellow part? This is the code : http://jsfiddle.net/r6p7E/18/

events: {
         mouseOut: function () {
             var serie = this.points;

             $.each(serie, function (i, e) {
                 if (!this.selected) {
                     this.graphic.attr({
                         fill: '#242c4a'
                     });
                 } else {
                     this.graphic.attr({
                         fill: '#fefe0f',
                     });
                 }
              });
          }, 

          click: function(event) {

          }
       }

Answer 1

You can try something like the below:

jQuery: (just the sample part, refer Demo for full code)

click: function(event) {
    //alert("ok");
    $('#testDiv').show();
}

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="testDiv" style="height: 400px;">Sample Left Div</div> <!-- Added this -->
<div id="container" style="height: 400px"></div>

CSS: (to display both Div in same line and hide left div on load)

div {
    display: inline;
}
#testDiv{
    display: none;
}

Updated Demo

Answer 2

add a hidden container for the content

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

in your click event do as follows

click: function(event) {
    if(event.point.selected){
        $("#content").hide();
    }else{
        $("#content").show();
        $("#content").html(event.point.name)
    }
}

jsfiddle example shows witch content was selected