Using jQuery .show( ) but the specified div won't show

Question

I have two divs of class info-pane. The first one starts out hidden (display: none) and the second has an element which when clicked, is supposed to hide that div and show the first.

HTML

<div id="infoDiv">
    <div class="info-pane" id="plang">
        <p>Serge Lang</p>
    </div>
    <div class="info-pane" id="pvecspace">
        <p id="thatpar"><span name="plang" class="clickable">Lang</span> 1983 p. 109</p>
    </div>
</div>

The problem is that when the "Lang" portion is clicked, the whole area just goes blank. It doesn't load up the other info-pane div. I've done other things with .hide() and .show() in the past and not had issues, so I don't know what the problem is. My real setup involves PHP and a much more complicated html file, but it doesn't work even in the simplified case.

JS

function setEventHandlers(){
    $("div[name], p[name], span[name]").click(function ( event ) {
        loadPane(this.name);
    });
}

function loadPane(paneId){

    $('#infoDiv div:not(#' + paneId + ').info-pane').hide();
    $('#' + paneId).show();

}

setEventHandlers();

CSS

#infoDiv {
    height: 200px;
    border: 1px solid black;
}
span.clickable {
    cursor: pointer;
}
#plang {
    display: none;
}

Link to JSFiddle

Here is a (not) working JSFiddle: http://jsfiddle.net/qn5KX/

I've included in the JSFiddle code I found for div-based console.log() set up, so you can use that to try and debug it if you want.

Answer 1

It did not worked because this.name doesnt exist in the content.Try this:

function setEventHandlers(){
  $("div[name], p[name], span[name]").click(function ( event ) {
        loadPane($(this).attr('name'));
  });}

Working Demo

Answer 2

Do the following changes

loadPane(this.name);

should be:

loadPane(this.id);

You are using id targetter # so you should use its id and not its name.

Answer 3

You must put your jquery code into document.ready. Use this:

$(document).ready(function(){
  function setEventHandlers(){
      $("div[name], p[name], span[name]").click(function ( event ) {
          loadPane(this.name);
      });
  }

  function loadPane(paneId){

      $('#infoDiv div:not(#' + paneId + ').info-pane').hide();
      $('#' + paneId).show();

  }

  setEventHandlers();
});