javascript - Jquery .load / .empty not loading and emptying content from div -

im trying load select content hidden on page content div. came across jquery's .load , .empty.

it seems have gone wrong somewhere, far can see should work,ideas im going wrong on ? , wider question .load / .empty right functions use or there simpler way ?

ive attached html , js below, , created jsfiddle here : https://jsfiddle.net/poha5cb2/3/

ive setup following :

<a id="op-1">open 1</a><br> <a id="op-2">open 2</a><br> <a id="op-3">open 3</a><br>  <hr>  <h2>content</h2> <div id="content">  </div>  <hr>  <div class="hidden-content-to-be-loaded" style="display: none;">     <div id="one">     <h3>one</h3>     </div>      <div id="two" class="initial-close">     <h3>two</h3>     </div>      <div id="three" class="initial-close">     <h3>three</h3>     </div> </div> 

and js ive written

$("#op-1").click(function(){                 $("#content").empty();         $("#content").load("#one); });  $("#op-2").click(function(){                 $("#content").empty();         $("#content").load("#two); });   $("#op-3").click(function(){                 $("#content").empty();         $("#content").load("#three); }); 

the load() method intended retrieve content external url making ajax request, not move around dom of current page selecting existing elements. appear have syntax error missing quotes on selectors.

as content in page don't need use ajax @ all. if restructure html , use common classes can both improve , simplify code selecting related content a it's matching index , showing it, this:

$('.open').click(function(e) {      e.preventdefault();      $('.content').hide().eq($(this).index('.open')).show();  })

.content {      display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <a href="#" class="open">open 1</a><br>  <a href="#" class="open">open 2</a><br>  <a href="#" class="open">open 3</a><br>    <hr>    <h2>content</h2>  <div id="content-container">      <div class="content">          <h3>one</h3> lorem ipsum dolor sit amet, consectetur adipisicing elit. laboriosam aut, veniam! eveniet, repudiandae ipsum? quas ea assumenda, ullam magnam dolores iste neque harum, repudiandae modi distinctio ratione laborum excepturi ad!      </div>      <div class="content">          <h3>two</h3> lorem ipsum dolor sit amet, consectetur adipisicing elit. laboriosam aut, veniam! eveniet, repudiandae ipsum? quas ea assumenda, ullam magnam      </div>      <div class="content">          <h3>three</h3> lorem ipsum dolor sit amet, consectetur adipisicing elit. laboriosam aut, veniam! eveniet, repudiandae ipsum? quas ea assumenda, ullam magnam. lorem ipsum dolor sit amet, consectetur adipisicing elit. ut sint consequatur saepe, quo beatae exercitationem          nostrum quos, illum inventore fuga dignissimos atque iusto. quis magnam voluptatibus, ipsum cum assumenda.      </div>  </div>