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

Question

I'm trying to create a page where clicking on a thumbnail image in the left column reveals text in the right column. Then there would be a number of thumbnails which each have their own text that appears in the same place in the right column when clicked.
I'm wondering if there are any CSS or jquery projects out there that do this kind of thing?
Thanks

Answer 1

I think this is what you are wanting, i made a jsFiddle with it.
HTML:
<div id="wrapper">
<div id="left">
<p>THUMBNAIL #1
</p>
<p>THUMBNAIL #2
</p>
<p>THUMBNAIL #3
</p>
</div>
<div id="right">
<!-- Each div here will contain the text to be show on the 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;
});