css - 2 columns - clicking thumbnail image in one reveals text in other -

i'm trying create page clicking on thumbnail image in left column reveals text in right column. there number of thumbnails each have own text appears in same place in right column when clicked. i'm wondering if there css or jquery projects out there kind of thing?

thanks

i think wanting, made jsfiddle it.

html:

<div id="wrapper"> <div id="left">     <p><a href="javascript:void()" class="one">thumbnail #1</a>     </p>     <p><a href="javascript:void()" class="two">thumbnail #2</a>     </p>     <p><a href="javascript:void()" class="three">thumbnail #3</a>     </p> </div> <div id="right">     <!-- each div here contain text show on right -->     <div id="textone" class="text" style="display:block;">          <h1>one</h1>          <p>zzril amet nisl consequat claritas litterarum. in aliquam dolore qui diam veniam. ut exerci ullamcorper ut sit dolor.</p>     </div>     <div id="texttwo" class="text">          <h1>two</h1>          <p>qui nobis nulla eu in lectores. legunt possim diam me nisl nostrud. legere claritatem duis anteposuerit aliquip et.</p>     </div>         <div id="textthree" class="text">              <h1>three</h1>              <p>qui nobis nulla eu in lectores. legunt possim diam me nisl nostrud. legere claritatem duis anteposuerit aliquip et.</p>         </div>     </div> </div> 

css:

a { text-decoration:none;  } #wrapper {     width:600px; } #left {     margin-top:100px;     overflow:hidden;     float:left;     width:20%; } #right {     overflow:hidden;     float:left;     width:80%; } 

javascript (jquery 1.9.1)

$(".text").hide();  $("#left a.one").click(function () {     $(".text").hide();     $("#textone").fadein();     return false; });  $("#left a.two").click(function () {     $(".text").hide();     $("#texttwo").fadein();     return false; });  $("#left a.three").click(function () {     $(".text").hide();     $("#textthree").fadein();     return false; });