Show hide div in one area

I have been looking all day to try and find something that matches what I want but I cant find anything anywhere.

I want to create a show hide div that shows / hides the div in one fixed area.

I want a gallery of thumbs on half my page and in the other half of the page I want to display the full profile associated to that thumb, so when i click on another thumb the previous thumb's div disappears and the new thumbs div appears in its place.

I am looking to achieve something like this: (just how the text appears on the left hand side when you click on a thumb) http://www.tcsdigitalworld.com/team

I have already achieved something simular on another website where the image swaps but I want to add text to this and show more content such as a profile. You can see what I have done there here: http://www.dansiop.com/epbs/index.php/brides/gowns/paloma-blanca.html

If anyone can point me in the right direction I would really appreciate it.

Many thanks

UPDATE: Thank you all for your input but I am a bit of a massive n00b when it comes to javascript.

I have tried doing all of these on the site that I want it to go on and I cant get any of them working. I can get some of them working at some point but not as it should.

The closest I got it working was using the sample that Ernestas Stankevičius offered

But as you can see it isnt quite working as when I click on the thumb they disappear - it doesnt do it on the link above but it does on my site. I am also not sure where I place what content to make it work.

Where do I place the thumb src and where do i place the profile content, main image etc?

I call this is my header:

<script>    
$(document).ready(function(){
$('.thumb').click(function(){
    $('#main').fadeOut(500).html($(this).children('.bla').html()).fadeIn(200);
})
});

 </script>

I set this in my css (not what I want in the end but its a start as you sugested:

#main { color: red }
.bla { display: none }
.thumb { cursor: pointer; background-color: blue; height: 100px; width: 100px; margin:  5px 开发者_如何学编程}

and I use this html:

<div id="main">sdfsdfsdf</div>
<div class="thumb">
<div class="bla">asdasdasd1</div>
</div>
<div class="thumb">
<div class="bla">asdasdasd2</div>
</div>
<div class="thumb">
<div class="bla">asdasdasd3</div>
</div>
<div class="thumb">
<div class="bla">asdasdasd4</div>
</div>

Just to clarify, when I click on the thumbs the text changes as I want it to but the thumbs disappear (not as I want it to)

Thanks in advance.

Dan

To expand a bit on richardneililagan answer...

Here is a bit of extra HTML and some JS:

<div id="leftpane">
    <img class="thumb" id="img_1" />
    <img class="thumb" id="img_2"/>
    <img class="thumb" id="img_3"/>
    <img class="thumb" id="img_4"/>
</div>
<div id="rightpane">
     <div id="prof_1" class="profile">Profile for image 1</div>
     <div id="prof_2" class="profile">Profile for image 2</div>
        <!-- etc -->
</div>

Then you can have somehting like this to handle your events:

$(".thumb").click(function() {
      var id = $(this).attr("id").split("_").pop();
      $(".profile").fadeOut();
      $("#prof_" + id).fadeIn();
}

Hope that helps!

Edit

Ok, based on the code I wrote before, this is working (tested here: http://jsfiddle.net/deleteman/94jQS/)

HTML

<div id="leftpane">
    <a class="thumb" href="#"><img id="img_1" src="http://img1.jarfil.net/3/test_iq-pixels_5x5_v1-a.png"/></a>

    <a class="thumb" href="#"><img id="img_2" src="http://www.kriptopolis.org/images/clasifica.jpg"/></a>

    <a class="thumb" href="#"><img  id="img_3" src="http://www.blogdetrabajo.com/wp-content/uploads/test.jpg"/></a>

</div>
<div id="rightpane">
     <div id="prof_1" class="profile">Profile for image 1</div>
     <div id="prof_2" class="profile">Profile for image 2</div>
    <div id="prof_3" class="profile">Profile for image 3</div>
</div>

CSS

a.thumb img { 
    width:100px;

}
.profile {
    display:none;
}

JS

$(".thumb").click(function() {
      var id = $(this).children("img").first().attr("id").split("_").pop();

    $(".profile").fadeOut('slow'); 
    $("#prof_" + id).fadeIn();
    return false;

});

Is that better now? Would that work for you?

That would be pretty easy if you've got HTML structured like a grid.

<div id="leftpane">
    <img class="thumb" />
    <img class="thumb" />
    <img class="thumb" />
    <img class="thumb" />
</div>
<div id="rightpane">
    <!-- and the profile information goes here -->
</div>

... 'cause that way, you can just target that whole #rightpane with a jQuery selector.

$('#rightpane').children().hide();

There's a bunch of ways you could achieve this.

You could store all the information you want to display in the full-sized window in a data object (for instance, an array containing objects, the objects have fields for title, desription text, and image.)

Then you generate the thumbnails so that when you click on them, they call a function that takes an index of the array as an arguement. You can then generate new HTML using some string substitution method and insert it into the full-sized div (after removing the old content) by using InnerHTML.

Need some imprvment, but u get the idea, I think.

http://jsfiddle.net/qS5U5/

I didn't look at the source code of the example site you ghave, but it's unlikely that there are multiple divs that are hidden and shown, it's probably just one div, which is hidden, then the innerHTML is changed and then faded-in.

It should be something like

$("#theDivThatIsClicked").click(function()
{
    $("#theDivThatWillContainTheText").hide(function()
    {
    $(this).html("add some text").show()
    })
});